/* Naytra — design tokens
   Single source of truth in CSS, mirroring docs/typography.md,
   docs/spacing-and-layout.md and docs/color.md. Update the docs and
   these tokens together. */

:root{
  /* Type families — Fraunces (display serif, titles at weight 340) + DM Sans (everything read) */
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Colour — brand core: Black #101010 · White #FFFFFF · Beige #EFE8DA */
  /* Flip-safe brand constants — hold their value inside .on-dark (unlike --paper/--ink). */
  --white:#FFFFFF;
  --black:#101010;
  --beige:#EFE8DA;
  /* Light ground (the 70) — white base, beige for warm panels/recessed */
  --paper:#FFFFFF;
  --paper-2:#FFFFFF;
  --sunk:#EFE8DA;      /* beige */
  --ink:#101010;       /* black */
  --ink-2:#565149;
  --ink-3:#8B857A;
  --line:#E4DECF;
  --line-2:#D6CEBB;

  /* Colour — dark ground (the 30) — black grounds, beige light-on-dark */
  --ground:#101010;
  --ground-2:#1B1B1A;
  --ground-3:#262523;
  --on-ground:#EFE8DA;  /* beige */
  --on-ground-2:#A7A093;
  --line-dark:#302F2C;

  /* Signal accent — Burnt Umber #7A4E3A (finalised 2026-10-09; kept <=10% of any view).
     Was Antique Bronze #8A7048, Deep Teal #36746E before that. */
  --accent-50:#F2EDEB;
  --accent-100:#DED3CE;
  --accent-300:#B69E93;
  --accent-500:#926E5D;
  --accent-700:#7A4E3A;   /* brand accent — AA text on white */
  --accent-glow:#B8866E;  /* lighter umber for dark grounds — AA+ on #101010 */

  /* P&L semantics — data only, never brand */
  --pos:#2F7D4F;
  --pos-dark:#58B07E;
  --neg:#B23B34;
  --neg-dark:#DE7169;

  /* Active accent — resolves per ground. Light by default. */
  --accent:var(--accent-700);

  /* Primary CTA hover — ink stays ink, just shifts. Per ground. */
  --cta-hover:#2A2A2A;

  /* Spacing — base-10 (client component scale + section extension) */
  --space-10:10px; --space-20:20px; --space-30:30px;
  --space-40:40px; --space-60:60px; --space-80:80px;
  --space-120:120px; --space-160:160px; --space-200:200px;

  /* Section rhythm — generous */
  --section-rhythm:var(--space-160);
  --section-hero:var(--space-200);

  /* Frame & 12-column grid */
  --frame-max:1280px;
  --content-max:1170px;
  --gutter:20px;                                              /* 12-col gutter */
  --col:calc((var(--content-max) - 11 * var(--gutter)) / 12); /* one column ≈ 79px */
  --margin-min:20px;
  --measure:570px;        /* ~6 col + gutters — default prose width */
}

/* A dark section is authored by scoping the ground tokens — not an OS theme flip.
   Applied to the video hero and How it works (final CTA and footer are light). */
.on-dark{
  background:var(--ground);
  color:var(--on-ground);
  --paper:var(--ground);
  --paper-2:var(--ground-2);
  --sunk:var(--ground-3);
  --ink:var(--on-ground);
  --ink-2:var(--on-ground-2);
  --ink-3:#7A756A;
  --line:var(--line-dark);
  --line-2:#403E39;
  --accent:var(--accent-glow);
  --pos:var(--pos-dark);
  --neg:var(--neg-dark);
  --cta-hover:#EDE7DB;
}

/* Mobile spacing (client values) */
@media (max-width:760px){
  :root{
    --space-40:30px; --space-60:50px;
    --section-rhythm:var(--space-80);
    --section-hero:var(--space-120);
    --gutter:15px;
  }
}