/* ==========================================================================
   coachjeo design tokens — Canopy Lattice, Mist palette, Newsreader + Figtree
   SINGLE SOURCE OF TRUTH for colour, type, space, radius, motion.
   Components must use the SEMANTIC tokens (--bg, --text, --accent ...), never
   raw hex values and never the --palette-* tokens directly.
   To change the look: edit this file only. Contrast ratios are noted inline
   (WCAG, text needs 4.5:1, graphics 3:1). Re-check any colour you change.
   ========================================================================== */

:root {
  /* ---------- Raw palette (Mist, light) — referenced only by this file ---------- */
  --palette-air: #F4F7F7;
  --palette-glow: #F5E7D3;
  --palette-concrete: #E3E8E8;
  --palette-brushed: #C7D0D3;
  --palette-steel: #7C8C93;
  --palette-titanium: #44525A;
  --palette-graphite: #1E2A30;
  --palette-canopy: #1B6F58;
  --palette-leaf: #5FC2A0;
  --palette-root: #C9704F;

  /* ---------- Semantic colour (light, the default) ---------- */
  --bg: var(--palette-air);                 /* page background */
  --bg-warm: var(--palette-glow);           /* warm tint: portraits, highlights, glow behind the mark */
  --surface: var(--palette-concrete);       /* cards, panels */
  --border: var(--palette-brushed);         /* hairlines, dividers (decorative: 1.4:1) */
  --border-strong: var(--palette-steel);    /* form fields, slab outline, icons (3.2:1, graphics only) */
  --text: var(--palette-titanium);          /* body text: 7.5:1 on Air */
  --heading: var(--palette-graphite);       /* headlines: 13.6:1 on Air */
  --accent: var(--palette-canopy);          /* links, buttons, the italic accent word: 5.6:1 on Air */
  --accent-contrast: var(--palette-air);    /* text on --accent: 5.6:1 */
  --accent-soft: var(--palette-leaf);       /* fills, leaf, new growth (graphics only) */
  --root: var(--palette-root);              /* root diamond (graphics only: 3.3:1; for text use --root-text) */
  --root-text: #A85D42;                     /* 4.5:1 on Air */
  --lattice-line: #DDE4E5;                  /* pattern lines (decorative) */
  --focus-ring: var(--palette-canopy);

  /* Doors (the three coaching themes). Shape/dot colour + a darker text tint. */
  --door-integration: #6F7BC9;
  --door-integration-text: #5862A1;         /* 4.6:1 on Concrete */
  --door-relationships: #D2705A;
  --door-relationships-text: #9A5141;       /* 4.7:1 on Concrete */
  --door-transitions: #2A8F9A;
  --door-transitions-text: #1E6E76;         /* 4.8:1 on Concrete */

  /* ---------- Typography ---------- */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --weight-body: 400;
  --weight-ui: 500;
  --weight-strong: 600;
  --weight-display: 500;                    /* headlines and the italic accent word */
  --weight-wordmark: 600;                   /* "coachjeo" wordmark */

  /* Fluid type scale. Body never below 16px. */
  --text-xs: 0.75rem;                       /* 12px: fine print only */
  --text-sm: 0.875rem;                      /* 14px: captions, labels */
  --text-md: 1rem;                          /* 16px: UI text */
  --text-body: 1.0625rem;                   /* 17px: default body */
  --text-reading: 1.125rem;                 /* 18px: long-form essays */
  --text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);

  --leading-hero: 1.02;
  --leading-heading: 1.12;
  --leading-body: 1.65;
  --leading-reading: 1.72;                  /* serif essays get a little more air */

  --tracking-hero: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.12em;                 /* only for small uppercase labels */

  /* ---------- Space (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;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---------- Shape ---------- */
  --radius-sm: 0.625rem;                    /* 10px: inputs, small chips */
  --radius-md: 0.875rem;                    /* 14px: door cards */
  --radius-lg: 1.25rem;                     /* 20px: panels */
  --radius-xl: 1.75rem;                     /* 28px: portrait frame */
  --radius-pill: 999px;                     /* buttons */
  --border-width: 1px;

  /* Shadows are rare. Cards use borders, not shadows. Overlays only: */
  --shadow-raised: 0 12px 32px rgb(30 42 48 / 0.10);

  /* ---------- Layout ---------- */
  --container: 70rem;                       /* 1120px */
  --container-narrow: 46rem;                /* 736px: essays, forms */
  --measure: 62ch;                          /* max line length for body text */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --target-min: 2.75rem;                    /* 44px: minimum touch target */

  /* ---------- Motion (calm; nothing moves on its own) ---------- */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Mark (documentation values, see site/design/brand/) ---------- */
  --mark-stem-extension: 25;                /* percent; the chosen stem length. Do not change without updating the SVGs. */
}

/* Dark is a variant for platforms that need it, never the identity.
   Opt in with <html data-theme="dark">. The site is light by default. */
[data-theme="dark"] {
  --bg: #131B1F;
  --bg-warm: #3A332B;
  --surface: #1C272C;
  --border: #223036;
  --border-strong: #9DB0B8;
  --text: #BBC7CA;                          /* 10.1:1 on Night */
  --heading: #EEF3F3;                       /* 15.6:1 on Night */
  --accent: #6FD6B3;                        /* 9.9:1 on Night */
  --accent-contrast: #131B1F;
  --accent-soft: #9FE3C9;
  --root: #EE9A7C;                          /* 7.9:1 on Night */
  --root-text: #EE9A7C;
  --lattice-line: #223036;
  --focus-ring: #6FD6B3;

  --door-integration: #A9B3F0;
  --door-integration-text: #A9B3F0;
  --door-relationships: #F0A08A;
  --door-relationships-text: #F0A08A;
  --door-transitions: #6CCBD6;
  --door-transitions-text: #6CCBD6;

  --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.40);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}