/* ============================================
   DESIGN TOKENS — Dark-first, Linear/HEX inspired
   ============================================ */

:root {
  /* ——— Color: neutrals (dark mode default) ——— */
  --bg-0: #07070a;          /* deepest */
  --bg-1: #0b0b10;          /* page */
  --bg-2: #101017;          /* cards */
  --bg-3: #161620;          /* elevated */
  --bg-4: #1e1e2a;          /* hover */

  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.09);
  --line-3: rgba(255, 255, 255, 0.14);

  --fg-0: #f4f4f7;          /* primary text */
  --fg-1: #c9c9d4;          /* secondary */
  --fg-2: #8b8b9a;          /* tertiary */
  --fg-3: #5a5a6a;          /* muted */
  --fg-4: #3a3a48;          /* disabled */

  /* ——— Accent (user picked blue #5b8dff) ——— */
  --accent: #5b8dff;
  --accent-2: #7ca5ff;
  --accent-soft: rgba(91, 141, 255, 0.14);
  --accent-glow: rgba(91, 141, 255, 0.35);

  /* ——— Semantic ——— */
  --success: #4fd1a1;
  --warn: #f5b64b;
  --danger: #ff6b6b;

  /* ——— Typography ——— */
  --font-sans: "Geist", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* ——— Spacing scale ——— */
  --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: 144px;

  /* ——— Radius ——— */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-full: 999px;

  /* ——— Shadows (soft, layered) ——— */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 48px -12px rgba(0,0,0,0.8);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ——— Layout ——— */
  --container: 1200px;
  --container-reading: 720px;
  --nav-h: 64px;

  /* ——— Density (tweakable) ——— */
  --density: 1;

  /* ——— Grain ——— */
  --grain: 0.04;
}

/* ============================================
   TYPOGRAPHY PAIRINGS (swap via data attribute)
   ============================================ */
:root[data-type="geist"] {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
:root[data-type="general"] {
  --font-sans: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-type="inter"] {
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-type="satoshi"] {
  --font-sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-type="serif"] {
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-serif-display: "Instrument Serif", Georgia, serif;
  --display-family: var(--font-serif-display);
}

/* ============================================
   ACCENTS (swap via data attribute)
   ============================================ */
:root[data-accent="violet"] { --accent: #7c6aff; --accent-2: #9b8cff; --accent-soft: rgba(124,106,255,0.14); --accent-glow: rgba(124,106,255,0.35); }
:root[data-accent="blue"]   { --accent: #5b8dff; --accent-2: #7ca5ff; --accent-soft: rgba(91,141,255,0.14); --accent-glow: rgba(91,141,255,0.35); }
:root[data-accent="white"]  { --accent: #f5f5f7; --accent-2: #ffffff; --accent-soft: rgba(245,245,247,0.10); --accent-glow: rgba(245,245,247,0.25); }
:root[data-accent="orange"] { --accent: #ff7a59; --accent-2: #ff9a7f; --accent-soft: rgba(255,122,89,0.14); --accent-glow: rgba(255,122,89,0.35); }
:root[data-accent="teal"]   { --accent: #4fd1c5; --accent-2: #7adfd6; --accent-soft: rgba(79,209,197,0.14); --accent-glow: rgba(79,209,197,0.35); }

/* ============================================
   DENSITY
   ============================================ */
:root[data-density="compact"]     { --density: 0.82; }
:root[data-density="comfortable"] { --density: 1; }

/* ============================================
   RETRO MODE
   ============================================ */
:root[data-retro="on"] {
  --font-sans: "VT323", "Press Start 2P", ui-monospace, monospace;
  --font-mono: "VT323", ui-monospace, monospace;
  --bg-0: #001100;
  --bg-1: #000800;
  --bg-2: #001500;
  --bg-3: #002200;
  --bg-4: #002e00;
  --fg-0: #c8ffc8;
  --fg-1: #8cff8c;
  --fg-2: #5ccc5c;
  --fg-3: #3b9a3b;
  --accent: #39ff14;
  --accent-2: #8cff6b;
  --accent-soft: rgba(57,255,20,0.14);
  --accent-glow: rgba(57,255,20,0.35);
  --line-1: rgba(57,255,20,0.08);
  --line-2: rgba(57,255,20,0.14);
  --line-3: rgba(57,255,20,0.22);
}