/* BG Jardinagem — design tokens.
   Source of truth for decisions: docs/marca.md. System description: DESIGN.md.
   Contrast ratios (WCAG 2.1) measured 2026-10-06 and noted next to each text color. */

/* Fonts load in ONE place: fontes.css (self-hosted), linked before this file. */

:root {
  /* Brand — fixed in both themes */
  --mata: #1E4D2B;        /* primary green, the uniform */
  --folha: #6A9A3A;       /* leaf green — NEVER text (3.13:1 on gelo, 2.93:1 on mata) */
  --folha-clara: #A9D07A; /* leaf on dark — 5.57:1 on mata */
  --gelo: #F7F8F3;        /* off-white — 9.14:1 as text on mata */
  --tinta: #16201A;       /* near-black */

  /* Roles — light theme */
  --bg: var(--gelo);
  --surface: #FFFFFF;
  --fg: var(--tinta);           /* 15.67:1 on bg */
  --muted: #5B655E;             /* 5.67:1 on bg */
  --heading: var(--mata);       /* 9.14:1 on bg */
  --link: #4A7A28;              /* 4.79:1 on bg */
  --line: #D5DBCD;              /* decorative only, not a text color */
  --accent-mark: var(--folha);  /* icons, rules, ticks — 3.13:1, passes the 3:1 for non-text */
  --focus: var(--mata);         /* focus ring on light — 9.14:1 */
  --focus-on-band: var(--folha-clara); /* focus ring on the band — 5.57:1 */

  /* The green band (hero, footer) is the same in both themes */
  --band-bg: var(--mata);
  --band-fg: var(--gelo);
  --band-accent: var(--folha-clara);
  --band-muted: #C6D6C2;        /* secondary text on the band, derived from its hue — 6.41:1 */
  --cta-bg: var(--gelo);        /* CTA on the band */
  --cta-fg: var(--mata);        /* 9.14:1 */
  --cta-solid-bg: var(--mata);  /* CTA on light sections */
  --cta-solid-fg: var(--gelo);

  /* Type */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-black: 800;
  /* Fluid scale, ~1.25 ratio; min at 360px, max at 1200px */
  --t-xs: 0.8125rem;                                  /* 13px — labels */
  --t-sm: 0.9375rem;                                  /* 15px — captions */
  --t-base: 1.0625rem;                                /* 17px — body */
  --t-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);/* 19→22 — lead */
  --t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);        /* 24→32 — h2 */
  --t-2xl: clamp(2rem, 1.55rem + 2.1vw, 3.25rem);     /* 32→52 — h1 */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --track-body: 0;
  --measure: 62ch;
  --tracking-label: 0.08em;

  /* Space — 4px base */
  --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: 4.5rem;
  --s-9: 6.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 72rem;

  /* Shape */
  --r-sm: 4px;    /* photos, tags */
  --r-md: 8px;    /* hero photo, the visit sheet */
  --r-pill: 999px;/* buttons */
  --tap: 48px;    /* minimum touch target */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1A12;
    --surface: #16241A;
    --fg: #EEF1E8;          /* 15.62:1 on bg */
    --muted: #A9B4A5;       /* 8.29:1 on bg */
    --heading: var(--folha-clara); /* 10.19:1 on bg */
    --link: var(--folha-clara);
    --line: #2A3A2E;
    --cta-solid-bg: var(--folha-clara);
    --cta-solid-fg: var(--mata); /* 5.57:1 */
    --accent-mark: var(--folha-clara); /* 10.19:1 */
    --focus: var(--folha-clara);
    /* light text on dark: a touch more leading and tracking */
    --lh-body: 1.65;
    --track-body: 0.005em;
    color-scheme: dark;
  }
}