/* ============================================================================
   tokens.css — single source of truth. "The Instrument Ledger":
   warm graphite ground, one Signal Amber accent, editorial serif (Fraunces)
   name, depth (bevels/neutral shadow) instead of glow.
   Retint the whole site by editing the variables below.
   ========================================================================== */

/* ── Display / name — Fraunces (variable serif, self-hosted) ── */
@font-face {
  font-family: "Site Display";
  src: local("Fraunces"), url("/assets/fonts/Fraunces-latin.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Site Display";
  src: local("Fraunces"), url("/assets/fonts/Fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; font-style: normal;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Body / UI — Satoshi (400 / 500 / 700). */
@font-face {
  font-family: "Site Body";
  src: local("Satoshi Regular"), local("Satoshi-Regular"),
       url("/assets/fonts/Satoshi-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Site Body";
  src: local("Satoshi Medium"), local("Satoshi-Medium"),
       url("/assets/fonts/Satoshi-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Site Body";
  src: local("Satoshi Bold"), local("Satoshi-Bold"),
       url("/assets/fonts/Satoshi-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}

/* Data / mono — JetBrains Mono (500 / 600), latin + latin-ext. */
@font-face {
  font-family: "Site Mono";
  src: local("JetBrains Mono Medium"), local("JetBrainsMono-Medium"),
       url("/assets/fonts/JetBrainsMono-500-latin.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Site Mono";
  src: local("JetBrains Mono Medium"), local("JetBrainsMono-Medium"),
       url("/assets/fonts/JetBrainsMono-500-latin-ext.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Site Mono";
  src: local("JetBrains Mono SemiBold"), local("JetBrainsMono-SemiBold"),
       url("/assets/fonts/JetBrainsMono-600-latin.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

:root {
  /* ── Background layers — warm graphite (not blue-black) ── */
  --bg-void:   #050506;
  --bg-base:   #0B0C0E;
  --bg-raised: #141519;
  --bg-inset:  #08090B;
  --surface-2: #1B1E23;   /* solid floor behind any translucency — guarantees contrast */

  /* ── Glass surfaces (warm-white films) ── */
  --glass:        rgba(255,253,250,0.045);
  --glass-strong: rgba(255,253,250,0.07);
  --glass-hover:  rgba(255,253,250,0.10);
  --glass-tint-cyan:   rgba(237,161,69,0.045);   /* amber tint (name kept for compatibility) */
  --glass-tint-violet: rgba(237,161,69,0.03);

  /* ── Borders / hairlines (warm) ── */
  --hairline:        rgba(255,252,246,0.10);
  --hairline-soft:   rgba(255,252,246,0.055);
  --hairline-accent: rgba(237,161,69,0.42);

  /* ── Accent — one "Signal Amber" (token names kept so every usage retints) ── */
  --cyan-400:  #F6B968;   /* hover / bright tick */
  --cyan-500:  #EDA145;   /* PRIMARY accent — Signal Amber */
  --cyan-600:  #C67D2C;   /* pressed / deep border */
  --violet-400:#F6B968;
  --violet-500:#EDA145;
  --duotone:   linear-gradient(118deg, #F6B968 0%, #EDA145 100%);

  /* ── Accent glow tuples (amber) — used sparingly ── */
  --glow-cyan:   237,161,69;
  --glow-violet: 237,161,69;

  /* ── Text tiers — warm bone, never pure #FFF ── */
  --text-hi:  #F4F1EA;
  --text-mid: #B7B2A6;
  --text-lo:  #847E72;
  --text-dim: #4B473F;

  /* ── Semantic ── */
  --pos: #56B981;  --warn: #EDA145;  --neg: #E8687A;

  /* ── Depth kit — neutral directional shadow + bevels (replaces glow) ── */
  --bevel-top: inset 0 1px 0 rgba(255,255,255,0.06);
  --bevel-bot: inset 0 -1px 0 rgba(0,0,0,0.5);
  --shadow-card: 0 1px 1px rgba(0,0,0,0.4), 0 10px 26px -12px rgba(0,0,0,0.55);
  --elev-1: 0 2px 10px -6px rgba(0,0,0,0.6);
  --elev-2: var(--bevel-top), var(--bevel-bot), var(--shadow-card);
  --elev-3: var(--bevel-top), 0 24px 60px -22px rgba(0,0,0,0.7);
  --elev-inset: inset 0 2px 8px rgba(0,0,0,0.55);

  /* ── Typography families ── */
  --font-display: "Site Display", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Site Body", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Site Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* ── Radii ── */
  --r-card: 16px;
  --r-well: 12px;
  --r-btn:  10px;
  --r-pill: 999px;

  /* ── Spacing scale (8px base) ── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  /* ── Layout ── */
  --content-max: 1200px;
  --shell-max:   1440px;
  --page-x: clamp(20px, 5vw, 64px);
  --spine-x: 48px;
  --nav-h: 68px;

  /* ── Blur ── */
  --blur-card: 16px;
  --blur-nav:  14px;
  --blur-modal:24px;

  /* ── z-index scale ── */
  --z-bg-wash:   -40;
  --z-bg-aurora: -30;
  --z-bg-grid:   -20;
  --z-bg-grain:  -10;
  --z-spine:      2;
  --z-content:    10;
  --z-nav:        100;
  --z-cursor:     200;
  --z-drawer:     900;
  --z-modal:      1000;
  --z-toast:      1100;
  --z-skiplink:   1200;

  /* ── Motion ── */
  --dur-fast: 120ms;
  --dur-1:    200ms;
  --dur-2:    520ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}