/* ============================================================
   Design tokens — single source of truth.
   §17 of the style guide implemented VERBATIM, then extended
   with tokens encoded from §2 (type), §3 (color), §4 (spacing),
   §5 (radii), §12 (motion), §13 (surface), §14 (light variant),
   §15 (focus). Every derivation is logged in NOTES.md.
   No color, size, radius, or duration outside this file.
   ============================================================ */

:root {
  /* ---- §17 verbatim ---- */
  --color-bg: #1d1f1c;   /* one step darker than §17 #20221f for backlit depth (lumen revision) */
  --color-bg-raised: #2d312b;
  --color-sage: #5c594b;
  --color-olive: #8f8774;
  --color-cream: #f2ebdd;
  --color-text: #f2ebdd;
  --color-text-muted: #b9b3a4;
  /* Lumen revision (user-directed 2026-08-06): the accent system moves to a
     luminous pale sage; terracotta remains ONLY as the primary CTA fill.
     Original guide §17 values preserved in --color-terracotta / --color-cta. */
  --color-accent: #afc9a8;
  --color-accent-hover: #c6dcbf;
  --color-border: rgba(242, 235, 221, 0.16);

  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --max-width: 1280px;

  /* ---- §3 core palette (names the guide defines beyond §17) ---- */
  --color-warm-cream: #e8dee2;   /* "Warm Cream — main text on dark" */
  --color-bone: #f2ebdd;         /* alias of --color-cream */
  --color-clay: #917362;
  --color-terracotta: #ca8976;   /* palette terracotta; CTA accent is --color-accent */
  --color-espresso: #4a3a30;

  /* ---- §3 functional colors ---- */
  --color-text-subtle: #8f8b7e;
  --color-border-strong: rgba(242, 235, 221, 0.28);
  --color-cta: #d09279;          /* §17 terracotta: the page's one warm moment */
  --color-cta-hover: #e0aa92;
  --color-cta-text: #20221f;
  --color-link-hover: #c6dcbf;
  --color-success: #98a787;

  /* ---- §3 recommended background gradient (atmospheric only) ---- */
  --bg-atmosphere:
    radial-gradient(circle at 78% 18%, rgba(143, 135, 116, 0.35), transparent 34%),
    linear-gradient(115deg, #171a18 0%, #242923 54%, #4d5044 100%);

  /* ---- §2 type scale (desktop/mobile px from the table, as clamps) ---- */
  /* 2026-08-10 user direction: headline runs full container width; cap stepped
     84px -> 72px (still §2's 72–88 desktop range) so the first sentence holds
     one wide line at 1440. */
  --text-hero: clamp(2.75rem, 1.5rem + 3.4vw, 4.5rem);    /* 44–72px */
  --text-h1: clamp(2.625rem, 1.8rem + 2.8vw, 4rem);       /* 42–64px */
  --text-h2: clamp(2.125rem, 1.7rem + 1.6vw, 2.75rem);    /* 34–44px */
  --text-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);     /* 24–28px */
  --text-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19–22px */
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);    /* 16–18px */
  --text-label: 0.8125rem;                                 /* 13px */
  --text-button: 0.9375rem;                                /* 15px */

  --weight-display: 400;
  --weight-h3: 600;
  --weight-label: 600;
  --weight-button: 650;

  --leading-display: 1.04;   /* §2: 0.98–1.08 */
  --leading-heading: 1.15;
  --leading-lead: 1.5;
  --leading-body: 1.65;

  --tracking-serif: -0.025em;
  --tracking-sans-heading: -0.015em;
  --tracking-label: 0.08em;
  --tracking-button: 0.01em;

  /* ---- §4 layout ---- */
  --gutter-desktop: 72px;      /* §4: 64–88px */
  --gutter-tablet: 40px;
  --gutter-mobile: 24px;       /* §4: 20–24px */
  --text-column: 680px;        /* §4: 620–720px */
  --grid-gap: 24px;            /* §6: 24px gutters */

  /* ---- §12 motion ---- */
  --motion-rise: 14px;                 /* §12: 12–18px */
  --duration-reveal: 500ms;            /* §12: 400–600ms */
  --duration-hover: 200ms;             /* §12 / §9: 180–220ms */
  --stagger: 60ms;                     /* §12: 50–80ms */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- §9 card surface ---- */
  --card-bg: rgba(242, 235, 221, 0.045);
  --card-border: rgba(242, 235, 221, 0.12);
  --card-pad: var(--space-8);

  /* ---- §13 grain ---- */
  --grain-opacity: 0.035;

  /* ---- §5 pattern/shape overlays ---- */
  --shape-opacity: 0.07;        /* §5: 4–10% ceiling; per-placement may vary 0.04–0.10 */
  /* 2026-08-08 user direction: shapes must be *visible*. Placed wrappers now
     carry their own opacity (0.14–0.55 per placement in page.css); the §5
     ceiling remains the default for anything unclassified. */

  /* ---- band aliases for structural section dividers ----
     A divider inherits its top color from the section it lives in; the fill
     (the next band's color) must be context-independent, so the three band
     grounds get fixed aliases here. Keep in sync with --color-bg values. */
  --band-dark: #1d1f1c;
  --band-cream: #efe9dc;
  --band-terra: #ca8976;

  /* espresso as a shape stroke color (dividers crossing terracotta) */
  --shape-espresso: #4a3a30;

  /* ---- ambient shape motion (2026-08-08) ---- */
  --drift-slow: 26s;
  --drift-mid: 18s;
  --spin-slow: 110s;

  /* ---- §15 focus ---- */
  --focus-ring: 2px solid #d09279;
  --focus-offset: 4px;
}

/* ---- §14 light section variant ----
   Values are §14's table verbatim. Strong border and accent-hover have no
   §14 entry; both reuse the closest §14 token (border, accent). Logged in
   NOTES.md as derivations. */
.section-light,
[data-variant="light"] {
  --color-bg: #efe9dc;
  --color-bg-raised: #e5decf;
  --color-text: #272a25;
  --color-text-muted: #66685f;
  --color-text-subtle: #66685f;
  --color-border: #cbc3b3;
  --color-border-strong: #cbc3b3;
  /* lumen revision: deep sage accent on cream (4.75:1); §14's #A8614B retired
     with the terracotta accent system */
  --color-accent: #5a6b54;
  --color-accent-hover: #5a6b54;
  /* §14 is silent on buttons. No text token passes 4.5:1 on the #a8614b
     accent fill (cream 3.88, dark 3.10), so a light-section CTA uses the §14
     main-text token as its fill with cream text (12.02). Measured, not
     invented; no button currently renders in a light section. */
  --color-cta: #272a25;
  --color-cta-text: #efe9dc;
  --card-bg: #e5decf;
  --card-border: #cbc3b3;
  /* eyebrows use --color-olive; root #8f8774 is 2.95 on cream, so step to the
     §14 secondary text tone (4.68) */
  --color-olive: #66685f;
}

/* ---- terracotta band variant (user-directed, 2026-08-08) ----
   Ground is §3 terracotta #ca8976. Every text token measured against it:
   ink 5.61, deep-moss 4.64 (small-text muted), espresso 3.79 (large only,
   used for display-size accents), #3a2e26 4.60 (eyebrow tone). */
.section-terra,
[data-variant="terra"] {
  --color-bg: #ca8976;
  --color-bg-raised: #c07f6a;
  --color-text: #20221f;
  --color-text-muted: #2d312b;
  --color-text-subtle: #2d312b;
  --color-border: rgba(32, 34, 31, 0.28);
  --color-border-strong: rgba(32, 34, 31, 0.45);
  --color-accent: #4a3a30;        /* 3.79:1 — display sizes only on terra */
  --color-accent-hover: #4a3a30;
  --color-olive: #3a2e26;         /* 4.60:1 */
  --color-cta: #20221f;
  --color-cta-hover: #2d312b;
  --color-cta-text: #f2ebdd;      /* 13.51:1 on the ink fill */
  --color-link-hover: #20221f;
  --card-bg: rgba(32, 34, 31, 0.10);
  --card-border: rgba(32, 34, 31, 0.28);
  /* shape strokes readable on the terracotta ground */
  --shape-cream: #efe9dc;
  --shape-olive: #4a3a30;
  --shape-sage: #2d312b;
  --shape-terracotta: #4a3a30;
}