/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Petla app brand tokens (Direction B: Ink and Sage) */
:root {
  --ink: #171a18;
  --bark: #2b352d;
  --umber: #6a6d69;

  --moss: #4e8a4f;
  --fern: #7caa78;
  --sage: #7caa78;
  --leaf: #d3e6d1;
  --mist: #d3e6d1;

  --cream: #f3f7f2;
  --paper: #f3f7f2;
  --warm: #eaf2e8;

  --gold: #b0623c;
  --goldf: #cc7d56;

  --mid: #6a6d69;
  --light: #a8ada6;
  --rule: rgba(23, 26, 24, 0.12);
}

/* Base */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Shared logo */
.nav-logo,
.footer-logo {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--moss);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-logo {
  font-size: 1.25rem;
}

.brand-mark {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: 0 0 22px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.nav-logo > .brand-mark,
.footer-logo > .brand-mark {
  width: 22px !important;
  height: 22px !important;
}

.nav-logo-leaf,
.footer-logo-leaf {
  display: none;
}

/* Back link (legal pages) */
.nav-back {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-back:hover {
  color: var(--moss);
}