/* ============================================================
   SHARED DESIGN SYSTEM — Sahand Hagi × Vague Ventures
   Single source of truth. Copied into each site's /assets/tokens.css.
   Palantir-informed technical language (2026-07-23):
     - sharp corners (no rounded), hairline grids, flat surfaces
     - near-black chrome for hero + statement bands ("dark accents,
       light content"): the on-black tokens are theme-independent
     - a monospace annotation system (labels, coordinates, indices)
   Family resemblance = shared neutrals + near-black chrome + mono.
   Distinct identity  = per-site accent + heading face (set in site.css):
     Vague Ventures -> --accent teal,  headings grotesque (Public Sans)
     Sahand Hagi    -> --accent gold,  headings serif (Newsreader)
   ============================================================ */

:root {
  /* --- brand core (shared) --- */
  --navy:        #1f2a55;
  --navy-700:    #17203f;
  --navy-900:    #0f162b;
  --teal:        #0b7266;   /* Vague Ventures accent */
  --gold:        #8a5e0f;   /* Sahand Hagi accent (darkened to clear AA 4.5:1 on paper) */

  /* --- neutrals, biased cool toward the navy so they read "chosen" --- */
  --paper:       #f7f7f8;
  --surface:     #ffffff;
  --surface-2:   #f2f3f5;
  --line:        #e3e5ea;
  --line-strong: #cfd2db;
  --ink:         #12141a;
  --ink-soft:    #3a3f4c;
  --ink-mute:    #6b7080;

  /* --- near-black chrome (theme-independent: dark hero + bands) --- */
  --black:       #0a0b0e;
  --black-2:     #101218;
  --on-black:       #f3f4f7;
  --on-black-soft:  #c4c8d2;
  --on-black-mute:  #8b909d;
  --line-dark:        rgba(255,255,255,.14);
  --line-dark-strong: rgba(255,255,255,.24);
  --accent-on-black:  #2fbfae;   /* overridden per site (gold on the personal site) */

  /* --- role tokens (components read these, never raw colors) --- */
  --accent:      var(--teal);
  --accent-ink:  #06120f;
  --bg:          var(--paper);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --fg-mute:     var(--ink-mute);
  --card:        var(--surface);
  --card-2:      var(--surface-2);
  --border:      var(--line);
  --border-2:    var(--line-strong);
  --header-bg:   rgba(247,247,248,.86);

  /* --- type --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;  /* VV overrides to the grotesque */
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale */
  --step--1: clamp(.75rem, .72rem + .1vw, .82rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3.15rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.6rem);
  --step-hero: clamp(2.5rem, 1.7rem + 4.2vw, 5.4rem);

  /* --- rhythm & shape: sharp, flat --- */
  --measure: 66ch;
  --radius:  0px;
  --radius-lg: 0px;
  --shadow-1: none;
  --shadow-2: 0 8px 30px rgba(10,11,14,.12);
  --pad-x: clamp(1.1rem, 4vw, 2.6rem);
}

/* ---------- dark theme: define once, style through tokens ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0b0c10;
    --surface:   #121319;
    --surface-2: #181a22;
    --line:      #24262f;
    --line-strong:#383b47;
    --ink:       #eef0f6;
    --ink-soft:  #c4c8d6;
    --ink-mute:  #9096a9;
    --navy:      #6f86d8;
    --teal:      #37b8a9;
    --gold:      #d7a63c;
    --header-bg: rgba(11,12,16,.82);
  }
}
:root[data-theme="dark"] {
  --paper:#0b0c10; --surface:#121319; --surface-2:#181a22;
  --line:#24262f; --line-strong:#383b47;
  --ink:#eef0f6; --ink-soft:#c4c8d6; --ink-mute:#9096a9;
  --navy:#6f86d8; --teal:#37b8a9; --gold:#d7a63c;
  --header-bg:rgba(11,12,16,.82);
}
:root[data-theme="light"] {
  --paper:#f7f7f8; --surface:#ffffff; --surface-2:#f2f3f5;
  --line:#e3e5ea; --line-strong:#cfd2db;
  --ink:#12141a; --ink-soft:#3a3f4c; --ink-mute:#6b7080;
  --navy:#1f2a55; --teal:#0b7266; --gold:#8a5e0f;
  --header-bg:rgba(247,247,248,.86);
}