/* ==========================================================================
   Director School — Design Tokens
   Chartered Editorial archetype — warm bone + royal blue + warm gold CTAs
   Type: Boska (display) + Satoshi (body) + JetBrains Mono (meta)
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --bg:           #F8F5EE;       /* warm bone — editorial paper */
  --bg-elevated:  #FFFFFF;       /* lifted surfaces, cards */
  --bg-subtle:    #EFE9DC;       /* section dividers, quote insets */
  --bg-ink:       #141210;       /* dark sections (signature moment) */

  /* --- Type --- */
  --ink:          #141210;       /* primary text */
  --text-muted:   #5B554B;       /* secondary, captions */
  --text-dim:     #8A8478;       /* meta, tertiary */
  --text-on-ink:  #F8F5EE;       /* text on dark bg */
  --text-on-ink-muted: #B8B0A2;

  /* --- Brand (extracted from existing logo) --- */
  --brand:        #2A4FA8;       /* royal blue — primary accent */
  --brand-deep:   #1A3A82;       /* hover, deeper anchors */
  --brand-darker: #11265E;       /* deepest — hero background */
  --brand-night:  #0A1838;       /* near-black brand — for full-bleed dark sections */
  --brand-soft:   rgba(42, 79, 168, 0.08);
  --brand-line:   rgba(42, 79, 168, 0.25);

  /* --- Conversion (gold — used ONLY for primary CTAs) --- */
  --gold:         #C5AE79;
  --gold-hover:   #B89E68;
  --gold-deep:    #9B8554;

  /* --- Structural --- */
  --rule:         #CFC8BA;       /* hairline rules */
  --border-soft:  rgba(20, 18, 16, 0.06);
  --border-mid:   rgba(20, 18, 16, 0.12);

  /* --- Type families --- */
  --font-display: 'Boska', 'GT Sectra Display', 'Tiempos Headline', Georgia, serif;
  --font-body:    'Satoshi', 'Söhne', 'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Söhne Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Type scale (clamp-fluid) --- */
  --fs-display:   clamp(2.25rem, 7.5vw, 7.5rem); /* h1, signature moment */
  --fs-h2:        clamp(1.75rem, 4.5vw, 4rem);
  --fs-h3:        clamp(1.375rem, 2.5vw, 2.25rem);
  --fs-h4:        clamp(1.125rem, 2vw, 1.5rem);
  --fs-body-lg:   clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:      clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:     0.9375rem;
  --fs-meta:      0.75rem;        /* mono, uppercase, dateline */

  /* --- Line heights --- */
  --lh-display:   0.95;
  --lh-h2:        1.05;
  --lh-h3:        1.2;
  --lh-body:      1.6;
  --lh-meta:      1;

  /* --- Tracking --- */
  --tr-display:   -0.03em;
  --tr-h2:        -0.02em;
  --tr-meta:      0.08em;

  /* --- Spacing scale (4px base) --- */
  --space-1:  0.25rem;     /* 4 */
  --space-2:  0.5rem;      /* 8 */
  --space-3:  0.75rem;     /* 12 */
  --space-4:  1rem;        /* 16 */
  --space-5:  1.5rem;      /* 24 */
  --space-6:  2rem;        /* 32 */
  --space-7:  3rem;        /* 48 */
  --space-8:  4rem;        /* 64 */
  --space-9:  6rem;        /* 96 */
  --space-10: 8rem;        /* 128 */
  --space-11: 12rem;       /* 192 */

  /* --- Layout --- */
  --max-content: 1440px;
  --gutter:       clamp(1.5rem, 5vw, 6rem);   /* generous left/right margin */
  --grid-cols:    12;

  /* --- Shape --- */
  --radius-sm:    2px;
  --radius:       4px;
  --radius-lg:    8px;
  --radius-pill:  999px;

  /* --- Motion --- */
  --ease-out:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     200ms;
  --dur-base:     400ms;
  --dur-slow:     800ms;
  --dur-reveal:   1200ms;

  /* --- Z-index --- */
  --z-loader:     1000;
  --z-cursor:     999;
  --z-nav:        100;
  --z-modal:      90;

  /* --- Shadows (rare, editorial restraint) --- */
  --shadow-soft:  0 1px 2px rgba(20, 18, 16, 0.04), 0 8px 24px rgba(20, 18, 16, 0.06);
  --shadow-cta:   0 4px 16px rgba(197, 174, 121, 0.25);
}

/* Motion is forced on for all users (Chris build rule) — prefers-reduced-motion is ignored. */