/* LINAI design tokens.
   Layer 1: LINAI Retro design system base (dark theme).
   Layer 2: Casio black theme, the theme of the approved homepage. Layer 2 wins. */

/* LINAI Retro design system, dark theme, generated from design/tokens.json */
:root{
  --ink: #0a1120;
  --ink-deep: #090f1c;
  --navy: #0c2133;
  --window: #101b2e;
  --window-bar: #1a2a44;
  --glass: rgba(22, 35, 58, 0.55);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(238, 241, 246, 0.45);
  --bevel-hi: rgba(255, 255, 255, 0.28);
  --bevel-lo: rgba(0, 0, 0, 0.55);
  --scanline: rgba(0, 0, 0, 0.22);
  --fg: #eef1f6;
  --fg-2: #b9c2d0;
  --muted: #8792a6;
  --accent: #2abcb2;
  --accent-soft: #bdeff0;
  --mint: #d9f3f0;
  --stripe-1: #f4c542;
  --stripe-2: #f39237;
  --stripe-3: #e5604d;
  --stripe-4: var(--accent);
  --stripe-5: #3a86c8;
  --panel-1: #7fa9b3;
  --panel-2: #4fafc4;
  --panel-3: #b8eae5;
  --panel-ink: #0e2230;
  --paper: #f3efe4;
  --paper-bar: #e3dccb;
  --paper-ink: var(--ink);
  --paper-muted: #4f5563;
  --field: #ffffff;
  --edge: var(--ink);
  --on-accent: var(--ink);
  --accent-text: var(--accent-soft);
  --on-navy: var(--fg);
  --highlight: var(--stripe-1);
  --screen: var(--ink-deep);
  --panel-mid: var(--accent);
  --font-wordmark: "Rubik Mono One", "Arial Black", Arial, sans-serif;
  --font-display: "Audiowide", "Arial Black", Arial, sans-serif;
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --font-outline: "Rubik Mono One", "Arial Black", Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-window: 4px;
  --radius-panel: 6px;
  --text-hero: clamp(40px, 5.2vw, 76px);
  --text-display: clamp(32px, 4vw, 56px);
  --text-h2: clamp(28px, 3vw, 44px);
  --text-lede: clamp(17px, 1.4vw, 20px);
  --text-marquee: clamp(56px, 9vw, 140px);
  --text-wordmark-xl: clamp(72px, 15vw, 200px);
  --weight-heading: 400;
  --weight-mono-bold: 700;
  --container-site: 1360px;
  --container-narrow: 1180px;
  --container-panel: 1105px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(48px, 7vw, 96px);
  --stripe-h: 4px;
  --stroke-outline: 1.4px;
  --echo-step: 0.04em;
  --marquee-speed: 50s;
  --ticker-speed: 40s;
  --flow-speed: 16s;
  --shadow-hard: 4px 4px 0 0 #090f1c;
  --shadow-sun: 4px 4px 0 0 #f4c542;
  --shadow-teal: 4px 4px 0 0 #2abcb2;
  --shadow-window: 6px 6px 0 0 rgba(0, 0, 0, 0.45);
  --bevel-out: inset 1px 1px 0 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 0 rgba(0, 0, 0, 0.55);
  --bevel-in: inset 1px 1px 0 0 rgba(0, 0, 0, 0.35), inset -1px -1px 0 0 rgba(255, 255, 255, 0.6);
  --shadow-sun-lift: 6px 6px 0 0 #f4c542;
  --shadow-sun-sm: 3px 3px 0 0 #f4c542;
  --shadow-teal-lift: 6px 6px 0 0 #2abcb2;
  --shadow-panel: 6px 6px 0 0 #f39237;
}

/* Layer 2: Casio F-91W theme: black resin case, grey metal, teal stays the accent.
   Roboto Mono carries every text role on this site (the logo files are outlined artwork). */
:root{--font-display:"Roboto Mono",ui-monospace,Menlo,monospace;--font-sans:"Roboto Mono",ui-monospace,Menlo,monospace;--font-mono:"Roboto Mono",ui-monospace,Menlo,monospace;--font-outline:"Roboto Mono",ui-monospace,Menlo,monospace;--deep-bg:color-mix(in srgb,var(--ink-deep) 70%,#000);--ink:#0B0B0B;--ink-deep:#060606;--navy:#171717;--window:#151515;--window-bar:#262626;--glass:rgba(255,255,255,0.04);--line:rgba(235,235,235,0.10);--line-strong:rgba(225,225,225,0.40);--bevel-hi:rgba(255,255,255,0.22);--bevel-lo:rgba(0,0,0,0.7);--fg:#EDEDED;--fg-2:#BEBEBE;--muted:#8E8E8E;--screen:#000000;--on-navy:#EDEDED;--edge:#000000}