/* ============================================================================
   TO-CHOOSE · DESIGN TOKENS
   The single source of truth for every visual decision on the site.
   Import this file first in any CSS bundle.
   ============================================================================ */

:root {
  /* --------------------------------------------------------------- COLOR
     Names are semantic. Never reference raw hex anywhere else in the code. */

  /* Surface */
  --color-paper:        #FAF8F2;   /* page background — the whole site */
  --color-paper-deep:   #F1ECDE;   /* secondary surface — bridge sections, CTA pulls, work-card mats */
  --color-ink:          #1A1815;   /* primary text — warm near-black, never #000 */
  --color-ink-muted:    #6B6864;   /* captions, metadata, footer lead */
  --color-ink-quiet:    #9C9890;   /* hairline labels, deactivated UI */
  --color-rule:         #E5E1D5;   /* 1px section dividers */
  --color-rule-strong:  #C9C3B2;   /* 2px dividers, strong borders */

  /* Brand */
  --color-brand:        #A3CD39;   /* ToChoose green — CTAs and brand mark only */
  --color-brand-deep:   #88B41E;   /* hover/active states on green CTAs */

  /* Theme accents — used on eyebrows, badges, indices, and 56px section rules.
     Never on body text. Never as a background field. */
  --color-identity:        #D62828;
  --color-learning:        #FFD166;   /* decorative only — fails text AA on paper */
  --color-learning-ink:    #8A6B00;   /* AA-passing text variant for Learning eyebrows */
  --color-world:           #0077B6;

  /* Logo placeholder */
  --color-logo-orange:  #D88A3A;   /* "TO LIVE IS" eyebrow on the primary lockup */

  /* --------------------------------------------------------------- TYPE
     Two families. Display sets headlines; body sets everything else.
     Use the responsive --text-h* tokens for headings; raw px for one-offs. */

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --tracking-display:  -0.02em;    /* h1/h2 headlines */
  --tracking-display-tight: -0.025em;  /* very large h1 only */
  --tracking-body:      0;
  --tracking-caps:     0.06em;
  --tracking-eyebrow:  0.18em;

  --leading-display: 1.0;
  --leading-prose:   1.65;
  --leading-tight:   1.15;

  /* Responsive type scale — override these inside @container queries.
     Mobile defaults below; tablet/desktop overrides ship in globals.css. */
  --text-eyebrow:  11px;
  --text-caption:  12px;
  --text-meta:     13px;
  --text-body-sm:  15px;
  --text-body:     16px;
  --text-lead:     22px;
  --text-h3:       26px;
  --text-h2:       42px;
  --text-h2-section: 42px;
  --text-h1:       56px;

  /* --------------------------------------------------------------- SPACE
     Scale steps in px. Use --space-* anywhere you'd otherwise write a
     raw spacing value (gap, padding, margin). Push 20% past comfortable. */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 144px;
  --space-9: 208px;

  /* Page gutter — responsive */
  --page-pad-x:     22px;   /* mobile default; tablet/desktop reset in globals.css */
  --section-y:      64px;
  --section-y-cta: 128px;

  /* --------------------------------------------------------------- BORDERS */
  --border-hairline: 1px solid var(--color-rule);
  --border-divider:  2px solid var(--color-rule-strong);
  --radius-none: 0;
  --radius-pin:  1px;            /* CTA + chip corners — almost-square */

  /* --------------------------------------------------------------- BREAKPOINTS
     Container-queried, not viewport-queried. Same component, three widths. */
  --bp-tablet:  701px;
  --bp-desktop: 1024px;

  /* --------------------------------------------------------------- MOTION
     Restraint. Nothing above 600ms. */
  --motion-fast:   200ms cubic-bezier(0.2, 0, 0, 1);
  --motion-medium: 360ms cubic-bezier(0.2, 0, 0, 1);
  --motion-slow:   600ms cubic-bezier(0.2, 0, 0, 1);

  /* --------------------------------------------------------------- HERO OVERLAY
     The dark gradient laid over photographic heroes so a light-colored
     headline can read. Locked token, applied site-wide. Override `--hero-overlay`
     per page only when the image genuinely requires it. */
  --hero-overlay: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  --hero-sub-color: rgba(255, 255, 255, 0.9);   /* italic sub line under H1 — white-90%, never cream */

  /* --------------------------------------------------------------- LAYERS */
  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
}