/* ============================================================
   FLORA MARCHETTI — DESIGN TOKENS
   Sistema: "Prancha Técnica de Paisagismo"
   Toda decisão visual deriva do artefato: o projeto executivo
   que o paisagista entrega ao cliente — cotas, eixos, escala
   gráfica, códigos de talhão e lista de espécies.
   ============================================================ */

/* ---------- 1. TIPOGRAFIA (self-hosted, subset latin) ---------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Famílias
     Display  — Fraunces: serifa variável de curvatura orgânica.
                Escolhida pelo eixo de suavidade: cresce, não é rígida.
     Texto    — Archivo: grotesca neutra, alta legibilidade em corpo pequeno.
     Dados    — Plex Mono: a letra da prancha técnica. Só para cotas e códigos. */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* Escala tipográfica fluida — 320px → 1600px */
  --t-display: clamp(2.75rem, 1.2rem + 7.6vw, 7rem);
  --t-h1: clamp(2.25rem, 1.1rem + 5.6vw, 5rem);
  --t-h2: clamp(1.875rem, 1.1rem + 3.6vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1rem + 1.8vw, 2.125rem);
  --t-h4: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --t-deck: clamp(1.0625rem, 0.95rem + 0.75vw, 1.4375rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-small: 0.9375rem;
  --t-data: 0.6875rem;
  --t-data-lg: 0.75rem;

  --lh-display: 0.94;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.62;

  --ls-display: -0.035em;
  --ls-tight: -0.02em;
  --ls-data: 0.16em;

  /* ---------- 2. COR ----------
     Amostrada da flora local: araucária (símbolo de Curitiba),
     musgo de mata atlântica e o barro do vaso.
     O terracota existe para dar contraste ao CTA sem brigar
     com os verdes — é a cor do vaso, não um destaque arbitrário. */

  --c-ink: #0b1610;          /* araucária na sombra — quase preto esverdeado */
  --c-forest: #16301f;       /* verde escuro */
  --c-moss: #2f4a35;         /* verde musgo */
  --c-olive: #6f7f52;        /* verde oliva */
  --c-sage: #a3b096;         /* verde claro acinzentado */

  --c-paper: #f8f7f2;        /* branco quente */
  --c-bone: #efece2;         /* cinza claro */
  --c-sand: #ded6c5;         /* bege */
  --c-terra: #b0572f;        /* barro — cor de ação (fundo de botão) */
  --c-terra-deep: #8f4423;   /* barro escuro — barro como TEXTO sobre claro */
  --c-ochre: #c2963f;        /* dourado seco — só sobre fundo escuro */
  --c-ochre-ink: #7d5f1a;    /* mesmo dourado legível sobre fundo claro */

  /* Papéis semânticos */
  --bg: var(--c-paper);
  --bg-alt: var(--c-bone);
  --bg-deep: var(--c-ink);
  --fg: var(--c-ink);
  /* Razões medidas no navegador contra --c-paper / --c-bone */
  --fg-muted: #4a5a4d;       /* 6.84 / 6.21 — AA */
  --fg-faint: #5a6a5c;       /* 5.36 / 4.87 — AA */
  --fg-on-deep: var(--c-paper);
  --fg-on-deep-muted: #b6c0b2; /* AA sobre --c-ink (9.1:1) */

  --rule: rgba(11, 22, 16, 0.14);      /* linha de cota */
  --rule-strong: rgba(11, 22, 16, 0.26);
  --rule-on-deep: rgba(248, 247, 242, 0.16);
  --rule-on-deep-strong: rgba(248, 247, 242, 0.32);

  --accent: var(--c-terra);
  --accent-hover: var(--c-terra-deep);
  --focus: #1f5f3f;

  /* ---------- 3. ESPAÇAMENTO ----------
     Escala de 4px. Nomes por intenção, não por tamanho. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Ritmo vertical das seções */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --section-y-tight: clamp(3rem, 2rem + 4.5vw, 6rem);

  /* ---------- 4. GRID ----------
     12 colunas, calha externa fluida (visual-system.md §4) */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1560px;
  --maxw-text: 62ch;
  --col-gap: clamp(1rem, 2vw, 2rem);

  /* ---------- 5. BORDAS ----------
     Cantos quase retos. A prancha técnica não tem cantos moles. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  /* ---------- 6. SOMBRAS ----------
     Elevação discreta e esverdeada — nunca cinza neutro. */
  --sh-sm: 0 1px 2px rgba(11, 22, 16, 0.06);
  --sh-md: 0 2px 4px rgba(11, 22, 16, 0.05), 0 8px 20px rgba(11, 22, 16, 0.06);
  --sh-lg: 0 4px 8px rgba(11, 22, 16, 0.06), 0 18px 44px rgba(11, 22, 16, 0.1);
  --sh-cta: 0 2px 6px rgba(143, 68, 35, 0.24), 0 12px 28px rgba(143, 68, 35, 0.2);

  /* ---------- 7. MOVIMENTO ----------
     Curva única em todo o site (visual-system.md §6). */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 240ms;
  --d-mid: 420ms;
  --d-slow: 700ms;

  --header-h: 76px;
}

@media (max-width: 700px) {
  :root { --header-h: 64px; }
}

/* Contexto escuro — inverte os papéis sem redefinir componentes */
.on-deep {
  --bg: var(--c-ink);
  --fg: var(--c-paper);
  --fg-muted: var(--fg-on-deep-muted);
  --fg-faint: #93a091;
  --rule: var(--rule-on-deep);
  --rule-strong: var(--rule-on-deep-strong);
  color: var(--fg);
  background: var(--bg);
}