/* Turbulent Ground design tokens
 *
 * Single source of truth for colour, type, spacing and radius.
 * Status: DRAFT, design-foundations OpenSpec packet revision 2. Not yet
 * linked from any page. See research/openspec/changes/design-foundations/.
 *
 * Rules:
 * - Pages must not redefine these names in their own :root.
 * - Colour, font-family and font-size values belong here, not in page CSS.
 *   That includes translucent rgba() variants: use the overlay, tint, glow
 *   and scrim tokens below.
 * - Names describe the job, not the colour (--on-accent, not --white).
 * - Every colour token has a value in BOTH themes. Adding a token to :root
 *   without a light value fails scripts/audit/check-contrast.mjs.
 * - Contrast for both themes is verified by that script, not by comments.
 *
 * Theming:
 * - Dark is the default and the brand. Light exists so the system stays
 *   theme-ready; it is applied only where a page sets data-theme="light"
 *   (currently the privacy notices). No toggle and no prefers-color-scheme
 *   switching: that needs its own proposal and evidence of demand.
 */

:root {
  color-scheme: dark;

  /* ── Colour: dark theme (default). Homepage palette adopted sitewide,
        Graham's decision 2026-10-01. ─────────────────────────────── */

  /* Surfaces */
  --bg:             #0b0907;  /* page background */
  --bg-2:           #131110;  /* alternate section background */
  --bg-warm:        #1c1915;  /* raised panel */
  --surface:        #26211c;  /* card, input */
  --bg-translucent: rgba(14, 11, 8, 0.96);  /* sticky nav, mobile menu */

  /* Text */
  --ink:            #efe5d3;  /* headings, emphasis */
  --ink-mid:        #cdbd9f;  /* body text */
  --muted:          #a8977f;  /* secondary text, meta */

  /* Accent */
  --orange:         #d9571c;  /* brand accent: rules, icons, large text. Not body text. */
  --orange-lt:      #e8763a;  /* links and accent text */
  --orange-btn:     #b84215;  /* filled controls */
  --orange-hover:   #a23a13;  /* filled control hover */
  --on-accent:      #ffffff;  /* text on --orange-btn */
  --focus-ring:     #e8763a;

  /* Lines */
  --border:          rgba(232, 220, 200, 0.10);
  --border-strong:   rgba(232, 220, 200, 0.18);
  --border-emphasis: rgba(232, 220, 200, 0.28);

  /* Effects (replace inline rgba() values in page CSS) */
  --overlay-1:      rgba(255, 255, 255, 0.04);  /* subtle hover / raised tint */
  --overlay-2:      rgba(255, 255, 255, 0.07);
  --accent-tint:    rgba(217, 87, 28, 0.18);    /* accent borders, selected backgrounds */
  --accent-glow:    rgba(217, 87, 28, 0.08);    /* radial background glows */
  --accent-shadow:  rgba(217, 87, 28, 0.60);    /* coloured button shadow */
  --scrim:          rgba(0, 0, 0, 0.52);        /* modal backdrop */

  /* ── Typography ─────────────────────────────────────────────── */
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-wordmark: 'Bebas Neue', 'DM Sans', sans-serif;

  /* Body roles: Graham's decisions 2026-10-01, 400 weight, 17px body. */
  --text-lead:   clamp(1.125rem, 1rem + 0.6vw, 1.25rem);   /* 18 → 20px */
  --text-body:   clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);  /* 16 → 17px */
  --text-small:  0.9375rem;                                 /* 15px */
  --text-meta:   0.8125rem;                                 /* 13px */

  --leading-lead:  1.55;
  --leading-body:  1.7;
  --leading-small: 1.6;
  --leading-meta:  1.5;

  --weight-body:   400;
  --weight-strong: 500;

  /* Display roles (headings). Cormorant Garamond sitewide. */
  --text-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --leading-display: 1.15;
  --weight-display: 400;

  /* ── Spacing (4px base) ─────────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;

  /* ── Radius and measure ─────────────────────────────────────── */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --measure: 66ch;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Light theme. Every colour token above must be redefined here. ── */
[data-theme="light"] {
  color-scheme: light;

  --bg:             #ffffff;
  --bg-2:           #f4f1ec;
  --bg-warm:        #f4f1ec;
  --surface:        #f4f1ec;
  --bg-translucent: rgba(255, 255, 255, 0.94);

  --ink:            #171310;
  --ink-mid:        #342d27;
  --muted:          #665d55;

  --orange:         #d9571c;
  --orange-lt:      #a23a13;
  --orange-btn:     #b84215;
  --orange-hover:   #8a3110;
  --on-accent:      #ffffff;
  --focus-ring:     #a23a13;

  --border:          #d8d0c7;
  --border-strong:   #bfb5aa;
  --border-emphasis: #a3978a;

  --overlay-1:      rgba(23, 19, 16, 0.03);
  --overlay-2:      rgba(23, 19, 16, 0.06);
  --accent-tint:    rgba(184, 66, 21, 0.12);
  --accent-glow:    rgba(217, 87, 28, 0.06);
  --accent-shadow:  rgba(184, 66, 21, 0.30);
  --scrim:          rgba(23, 19, 16, 0.45);
}

/* ── Base text roles. Pages opt in with these classes or element rules. ── */
.t-lead  { font-size: var(--text-lead);  line-height: var(--leading-lead);  font-weight: var(--weight-body); }
.t-body  { font-size: var(--text-body);  line-height: var(--leading-body);  font-weight: var(--weight-body); }
.t-small { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-body); }
.t-meta  { font-size: var(--text-meta);  line-height: var(--leading-meta);  font-weight: var(--weight-body); }

/* The phone type scale (body 20px, nothing under 18px, below 640px) lives in
   styles/reading.css so a page can take it without taking these colour tokens; the
   CTA rule (one line at 320px, short labels) lives there too. */