/* Design tokens — spec 05 §2. Day: "paper & ink" (B). Night: "holographic glass" (C). */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../assets/fonts/instrument-serif-latin.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../../assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../../assets/fonts/inter-latin-var.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg: #F3EFE6;          --bg-elev: #FBF9F4;     --surface-glass: rgb(255 255 255 / .65);
  --ink: #111111;         --ink-2: #55524B;       --ink-3: #8A857A;
  --line: rgb(17 17 17 / .12);                   --line-strong: #111111;
  --accent: #FF4D1A;
  --holo-1: #7C3AED; --holo-2: #06B6D4; --holo-3: #DB2777;
  --holo: linear-gradient(100deg, var(--holo-1), var(--holo-2) 60%, var(--holo-3));
  --holo-text: linear-gradient(100deg, #6D28D9, #0E7490 60%, #BE185D); /* AA on --bg */
  --aurora: radial-gradient(45% 30% at 85% 55%, rgb(6 182 212 / .18), transparent 70%),
            radial-gradient(45% 30% at 15% 62%, rgb(124 58 237 / .16), transparent 70%);
  --btn-primary-bg: #111111; --btn-primary-fg: #F3EFE6;
  --ok: #15803D; --warn: #B45309; --err: #B91C1C;
  --view-front: #E11D48; --view-top: #16A34A; --view-side: #2563EB;
  --focus: #6D28D9;

  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 36px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .18);
  --blur: 14px;

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 13px; --fs-s: 14px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 22px;
  --fs-h2: clamp(26px, 5vw, 40px); --fs-h1: clamp(36px, 9vw, 72px);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-20: 80px;
  --gutter: clamp(16px, 4vw, 32px);
  --content: 1200px;
  --tap: 44px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-micro: 120ms; --t-panel: 240ms; --t-scene: 480ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07070C;          --bg-elev: #11111A;     --surface-glass: rgb(255 255 255 / .07);
  --ink: #F5F3FF;         --ink-2: #C9C4DE;       --ink-3: #8C86A6;
  --line: rgb(255 255 255 / .16);                --line-strong: rgb(255 255 255 / .55);
  --accent: #67E8F9;
  --holo: linear-gradient(100deg, #A78BFA, #22D3EE 60%, #F472B6);
  --holo-text: linear-gradient(100deg, #C4B5FD, #67E8F9 60%, #F9A8D4);
  --aurora: radial-gradient(60% 40% at 20% 20%, rgb(124 58 237 / .5), transparent 70%),
            radial-gradient(50% 35% at 90% 50%, rgb(34 211 238 / .35), transparent 70%),
            radial-gradient(50% 30% at 30% 92%, rgb(236 72 153 / .3), transparent 70%);
  --btn-primary-bg: var(--holo); --btn-primary-fg: #07070C; /* dark text: white on cyan fails AA */
  --ok: #4ADE80; --warn: #FBBF24; --err: #F87171;
  --view-front: #FB7185; --view-top: #4ADE80; --view-side: #60A5FA;
  --focus: #67E8F9;
  --shadow-1: 0 12px 30px -10px rgb(124 58 237 / .55);
}