/* ============================================================================
   tokens.css — the single source of raw values.
   :root              = HUMAN view  (warm editorial daylight — the default)
   :root[data-view="agent"] = AGENT view (dark structural inspector)
   Everything else consumes var(--…). No raw hex/px outside this file.
   ========================================================================= */

:root {
  color-scheme: light;

  /* — surfaces (warm paper) — */
  --bg:          #F4F1E9;   /* page — warm ivory */
  --bg-2:        #EFEBE1;   /* alt band */
  --surface:     #FBFAF5;   /* cards, panels */
  --raised:      #FFFFFF;   /* elevated */
  --sunk:        #E9E5DA;   /* insets, wells */
  --rule:        #DBD6CA;   /* hairlines */
  --rule-soft:   #E7E2D6;   /* faintest dividers */
  --rule-strong: #C8C2B3;

  /* — ink — */
  --text:        #16151A;   /* primary, warm near-black */
  --text-soft:   #514E58;   /* secondary */
  --text-faint:  #87838F;   /* tertiary / captions */
  --text-onspectrum: #FFFFFF;

  /* — the spectrum (the lens is the ONLY source of color) — */
  /* decorative members: bright, used on the lens, rims, gradient keylines */
  --cyan:  #46C7E8;
  --blue:  #5B86FF;
  --pink:  #FF7EC4;
  /* ink-safe members: AA on paper, for links / labels / ticks */
  --cyan-ink: #0E7E99;
  --blue-ink: #2F54D6;
  --pink-ink: #C13B86;
  --accent:      var(--blue-ink);   /* primary interactive */
  --accent-quiet:#3F63E8;

  --spectrum: linear-gradient(90deg, var(--cyan) 0%, var(--blue) 50%, var(--pink) 100%);
  --spectrum-135: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 52%, var(--pink) 100%);
  --spectrum-faint: linear-gradient(90deg,
      color-mix(in srgb, var(--cyan) 26%, transparent) 0%,
      color-mix(in srgb, var(--blue) 26%, transparent) 50%,
      color-mix(in srgb, var(--pink) 26%, transparent) 100%);
  --halo: color-mix(in srgb, var(--blue) 18%, transparent);

  /* — product hues (resolve to ink-safe in each mode) — */
  --clarity: var(--blue-ink);
  --mnemos:  var(--pink-ink);
  --ohsom:   var(--cyan-ink);

  /* — agent-view syntax (defined here so transitions are smooth; only used in agent) — */
  --syn-punct:   var(--text-faint);
  --syn-key:     var(--cyan-ink);
  --syn-string:  var(--text);
  --syn-type:    var(--pink-ink);
  --syn-role:    var(--blue-ink);
  --syn-comment: var(--text-faint);

  /* — type — */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(3rem, 1.4rem + 7.4vw, 6.75rem);
  --fs-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  --fs-h2:      clamp(1.55rem, 1.1rem + 1.9vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --fs-sm:      0.9rem;
  --fs-mono:    0.82rem;
  --fs-micro:   0.69rem;

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.62;
  --track-mono: 0.14em;   /* eyebrows / labels */
  --track-tight: -0.02em; /* display */

  /* Fraunces variable axes (display warmth to match the wordmark) */
  --fr-soft: 28;
  --fr-wonk: 0;

  /* — space (0.25rem base) — */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
  --s-9: 6.5rem;  --s-10: 9rem;   --s-11: 12rem;

  /* — radius — */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* — motion — */
  --dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms; --dur-4: 920ms;
  --ease:        cubic-bezier(.22,.61,.27,1);
  --ease-out:    cubic-bezier(.16,.84,.30,1);
  --ease-inout:  cubic-bezier(.62,.04,.30,1);
  --ease-spring: cubic-bezier(.34,1.32,.42,1);

  /* — layout — */
  --maxw:   1200px;
  --maxw-text: 720px;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-h:  68px;

  /* — elevation (used sparingly; refraction is the real depth) — */
  --shadow-1: 0 1px 2px rgba(20,18,14,.05), 0 6px 18px -8px rgba(20,18,14,.12);
  --shadow-2: 0 2px 6px rgba(20,18,14,.06), 0 24px 60px -22px rgba(20,18,14,.22);
  --glass-tint: rgba(255,255,255,.55);
}

/* ===========================================================================
   AGENT view — dark structural inspector. Same token NAMES, machine-read values.
   ========================================================================= */
:root[data-view="agent"] {
  color-scheme: dark;

  --bg:          #0A0B0D;
  --bg-2:        #0C0E11;
  --surface:     #101317;
  --raised:      #14181E;
  --sunk:        #0D0F12;
  --rule:        #23262E;
  --rule-soft:   #1A1D23;
  --rule-strong: #313641;

  --text:        #E9EAEE;
  --text-soft:   #9498A2;
  --text-faint:  #686C76;
  --text-onspectrum: #07131F;

  --cyan:  #5FD8FF;
  --blue:  #7AA0FF;
  --pink:  #FF8FCD;
  --cyan-ink: #5FD8FF;
  --blue-ink: #93B2FF;
  --pink-ink: #FF9FD4;
  --accent:      var(--blue-ink);
  --accent-quiet:#7AA0FF;

  --halo: color-mix(in srgb, var(--cyan) 22%, transparent);

  --clarity: var(--cyan);
  --mnemos:  var(--blue);
  --ohsom:   var(--pink);

  --syn-punct:   #5A5E68;
  --syn-key:     var(--cyan);
  --syn-string:  #E9EAEE;
  --syn-type:    var(--pink);
  --syn-role:    var(--blue);
  --syn-comment: #5A5E68;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.8);
  --glass-tint: rgba(120,160,255,.06);
}

/* Honor explicit system dark preference for first paint ONLY if user hasn't chosen.
   (JS sets data-view; this is a graceful pre-JS default — still the human layout.) */