/* TwinOS Design System — shared across all pages.
   Tokens live in :root so adding a theme later is additive
   (body.theme-<name> { ... }). This file carries NO page-specific
   styles; those stay next to their page. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ── SF PRO FONT-FACE ──────────────────────────────────────────────────── */
@font-face { font-family:"Chicago FLF"; src:url("fonts/ChicagoFLF.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Less Perfect DOS VGA"; src:url("fonts/LessPerfectDOSVGA.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Pro Display"; src:url("fonts/SFPRODISPLAYREGULAR.OTF") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Pro Display"; src:url("fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Pro Display"; src:url("fonts/SFPRODISPLAYBOLD.OTF") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Pro Display"; src:url("fonts/SFPRODISPLAYLIGHTITALIC.OTF") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"SF Pro Display"; src:url("fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"SF Mono"; src:url("fonts/SFMonoRegular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Mono"; src:url("fonts/SFMonoMedium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"SF Mono"; src:url("fonts/SFMonoSemibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
  /* ── Primitive palette ── */
  --ts-void:     #0A0A0A;
  --ts-graphite: #1D1D1F;
  --ts-carbon:   #2A2A2C;
  --ts-fog:      #E5E5E7;
  --ts-mist:     #F5F5F7;
  --ts-pure:     #FFFFFF;

  --ts-blue:       #0066FF;
  --ts-blue-hover: #1A75FF;
  --ts-blue-press: #0052CC;
  --ts-blue-wash:  rgba(0,102,255,0.08);

  --ts-ink:   #0A0A0A;
  --ts-ink-2: #3C3C43;
  --ts-ink-3: #6E6E73;
  --ts-ink-4: #A1A1A6;

  --ts-bone:   #F5F5F7;
  --ts-bone-2: #C7C7CC;
  --ts-bone-3: #8E8E93;
  --ts-bone-4: #48484A;

  /* ── Legacy tokens (kept for backwards compat with existing page CSS) ── */
  --bg:#0A0A0A;
  --bg2:#1D1D1F;
  --bg3:#2A2A2C;
  --surface:rgba(255,255,255,0.032);
  --surface2:rgba(255,255,255,0.06);
  --surface3:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.12);
  --text:#F5F5F7;
  --text2:#C7C7CC;
  --text3:#8E8E93;
  --text4:#48484A;
  --accent:#0066FF;
  --accent2:#0066FF;
  --accent3:#1A75FF;
  --accent-dim:rgba(0,102,255,0.12);
  --red:#E05555;
  --red-dim:rgba(224,85,85,0.12);
  --mono-hi:rgba(255,255,255,0.88);
  --toolbar-h:48px;

  /* ── Semantic tokens (v2 design system) ── */
  --font-display:"SF Pro Display","Inter",-apple-system,sans-serif;
  --font-body:"SF Pro Display","Inter",-apple-system,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --fg:var(--ts-bone);
  --fg-secondary:var(--ts-bone-2);
  --fg-muted:var(--ts-bone-3);
  --fg-disabled:var(--ts-bone-4);
  --bg-primary:var(--ts-void);
  --bg-secondary:var(--ts-graphite);
  --bg-card:var(--ts-graphite);
  --border-hair:rgba(255,255,255,0.06);
  --border-soft:rgba(255,255,255,0.12);
  --accent-hover:var(--ts-blue-hover);
  --accent-press:var(--ts-blue-press);

  /* ── Type scale ── */
  --fs-hero:    clamp(64px, 8vw, 128px);
  --fs-display: clamp(44px, 5vw, 72px);
  --fs-title:   clamp(32px, 3.4vw, 48px);
  --fs-heading: clamp(22px, 2vw, 28px);
  --fs-subhead: 18px;
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-kicker:  11px;
  --fs-footer:  10px;

  --ls-display: -0.03em;
  --ls-title:   -0.025em;
  --ls-heading: -0.015em;
  --ls-body:    -0.005em;
  --ls-kicker:   0.18em;

  --lh-display: 1.0;
  --lh-title:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  /* ── Motion ── */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-xs:120ms;
  --dur-sm:220ms;
  --dur:320ms;
  --dur-lg:520ms;

  /* ── Spacing (8px grid) ── */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;

  /* ── Radii ── */
  --r-xs:4px;
  --r-sm:6px;
  --r:8px;
  --r-lg:12px;
}

/* ── DARK THEME (default; toggle via html[data-theme="light"] for light) ── */
html[data-theme="dark"] {
  --fg:var(--ts-bone);
  --fg-secondary:var(--ts-bone-2);
  --fg-muted:var(--ts-bone-3);
  --fg-disabled:var(--ts-bone-4);
  --bg-primary:var(--ts-void);
  --bg-secondary:var(--ts-graphite);
  --bg-card:var(--ts-graphite);
  --border:rgba(255,255,255,0.07);
  --border-hair:rgba(255,255,255,0.06);
  --border-soft:rgba(255,255,255,0.12);
  --text:var(--ts-bone);
  --text2:var(--ts-bone-2);
  --text3:var(--ts-bone-3);
  --text4:var(--ts-bone-4);
  --bg:var(--ts-void);
  --bg2:var(--ts-graphite);
  --bg3:var(--ts-carbon);
}

/* ── LIGHT THEME ────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --fg:var(--ts-ink);
  --fg-secondary:var(--ts-ink-2);
  --fg-muted:var(--ts-ink-3);
  --fg-disabled:var(--ts-ink-4);
  --bg-primary:var(--ts-pure);
  --bg-secondary:var(--ts-mist);
  --bg-card:var(--ts-pure);
  --border:rgba(0,0,0,0.10);
  --border-hair:rgba(0,0,0,0.07);
  --border-soft:rgba(0,0,0,0.14);
  --border2:rgba(0,0,0,0.18);
  --text:var(--ts-ink);
  --text2:var(--ts-ink-2);
  --text3:var(--ts-ink-3);
  --text4:var(--ts-ink-4);
  --bg:var(--ts-pure);
  --bg2:var(--ts-mist);
  --bg3:var(--ts-fog);
  --surface:rgba(0,0,0,0.04);
  --surface2:rgba(0,0,0,0.07);
  --surface3:rgba(0,0,0,0.11);
  --accent-dim:rgba(0,102,255,0.09);
  --red-dim:rgba(224,85,85,0.09);
  --mono-hi:rgba(0,0,0,0.88);
}

/* ── GRAYSCALE THEME ────────────────────────────────────────────────────── */
html[data-theme="grayscale"] {
  --fg:var(--ts-ink);
  --fg-secondary:#2A2A2A;
  --fg-muted:#5A5A5A;
  --fg-disabled:#9A9A9A;
  --bg-primary:#F5F5F5;
  --bg-secondary:#FFFFFF;
  --bg-card:#EAEAEA;
  --border:rgba(10,10,10,0.10);
  --border-hair:rgba(10,10,10,0.10);
  --border-soft:rgba(10,10,10,0.18);
  --border2:rgba(10,10,10,0.18);
  --text:#0A0A0A;
  --text2:#2A2A2A;
  --text3:#5A5A5A;
  --text4:#9A9A9A;
  --bg:#F5F5F5;
  --bg2:#FFFFFF;
  --bg3:#EAEAEA;
  --surface:rgba(10,10,10,0.04);
  --surface2:rgba(10,10,10,0.07);
  --surface3:rgba(10,10,10,0.11);
  --accent:#0A0A0A;
  --accent-hover:#2A2A2A;
  --accent-press:#1A1A1A;
  --accent-dim:rgba(10,10,10,0.08);
  --mono-hi:rgba(0,0,0,0.88);
}
html[data-theme="grayscale"] body { background:#F5F5F5; color:#0A0A0A; }

/* ── TYPEFACE THEMES ────────────────────────────────────────────────────── */
body.font-theme-1984, body.font-theme-1984 * {
  font-family:"Chicago FLF","Chicago","Charcoal",ui-monospace,monospace,sans-serif !important;
  font-variant-ligatures:none !important;
  font-feature-settings:"kern" 0 !important;
  font-style:normal !important;
}
body.font-theme-1984 em, body.font-theme-1984 i { font-style:normal !important; }

body.font-theme-dos, body.font-theme-dos * {
  font-family:"Less Perfect DOS VGA","Perfect DOS VGA 437","IBM Plex Mono",ui-monospace,monospace,sans-serif !important;
  -webkit-font-smoothing:none !important;
  font-smooth:never !important;
  font-style:normal !important;
}
body.font-theme-dos { font-size-adjust:0.52; }
body.font-theme-dos strong, body.font-theme-dos b { font-weight:400 !important; }
body.font-theme-dos em, body.font-theme-dos i { font-style:normal !important; }

/* ── RESET ─────────────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
html { visibility:visible; } /* counteracts base.html's FOUC-prevention <style>html{visibility:hidden}</style> */
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size:13px;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; }

/* ── UTILITIES ─────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.dv { width:1px; height:18px; background:var(--border2); flex-shrink:0; }
.sp { flex:1; }
.logo-sep { font-size:11px; color:var(--text3); margin:0 1px; }
.logo-page {
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  color:var(--text3);
  letter-spacing:.08em;
  text-transform:uppercase;
}