/* =========================================================
   BEYOND RANKINGS — THEME (design tokens)
   ---------------------------------------------------------
   This is the ONLY file that defines colours, fonts, spacing
   and radii. Every page (now and future: work/, projects/,
   tools/) reads from these tokens. Do not hard-code colours
   anywhere else.

   Palettes:  data-palette="navy" | "emerald" | "electric"
   LIVE PALETTE: electric (set on <html> in every page + main.js)
   Modes:     data-theme="dark" | "light"  (dark is default)
   Layout concept: dark "search-graph" canvas, one signal dot
   travelling query → revenue; quiet type, one bold serif word.
   ========================================================= */

:root {
  /* ---------- Palette 1: Midnight Navy (default) ---------- */
  --bg-d: #060B1D;   --surface-d: #0C1431;  --surface-2-d: #111B40;
  --fg-d: #E8EEFF;   --muted-d: #8E9BC2;    --line-d: rgba(150, 175, 255, 0.13);
  --a1-d: #5B8CFF;   --a2-d: #3EE6A0;

  --bg-l: #F4F6FC;   --surface-l: #FFFFFF;  --surface-2-l: #EAEFFB;
  --fg-l: #0A1230;   --muted-l: #4C587C;    --line-l: rgba(10, 30, 90, 0.12);
  --a1-l: #1D4ED8;   --a2-l: #047857;

  /* ---------- Type ---------- */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* ---------- Shape & space ---------- */
  --radius-s: 8px;  --radius-m: 14px;  --radius-l: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1160px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Brand logo tiles (logos keep real colours) ---------- */
  --tile-d: #EEF3F9;  --tile-line-d: rgba(255, 255, 255, 0.0);
  --tile-l: #FFFFFF;  --tile-line-l: rgba(10, 40, 80, 0.10);

  /* ---------- Active mode = dark ---------- */
  --bg: var(--bg-d); --surface: var(--surface-d); --surface-2: var(--surface-2-d);
  --fg: var(--fg-d); --muted: var(--muted-d); --line: var(--line-d);
  --a1: var(--a1-d); --a2: var(--a2-d);
  --tile: var(--tile-d); --tile-line: var(--tile-line-d);
  color-scheme: dark;
}

/* ---------- Palette 2: Black Emerald ---------- */
:root[data-palette="emerald"] {
  --bg-d: #040807;   --surface-d: #0A1310;  --surface-2-d: #10201A;
  --fg-d: #E7F6EF;   --muted-d: #87A69A;    --line-d: rgba(120, 240, 190, 0.12);
  --a1-d: #3EE6A0;   --a2-d: #6C9BFF;

  --bg-l: #F3F8F5;   --surface-l: #FFFFFF;  --surface-2-l: #E4F1EA;
  --fg-l: #06180F;   --muted-l: #46605A;    --line-l: rgba(6, 60, 40, 0.13);
  --a1-l: #047857;   --a2-l: #1D4ED8;
}

/* ---------- Palette 3: Electric Blue ---------- */
:root[data-palette="electric"] {
  --bg-d: #05060A;   --surface-d: #0E1119;  --surface-2-d: #151A26;
  --fg-d: #EEF3FA;   --muted-d: #8C97AA;    --line-d: rgba(140, 200, 255, 0.12);
  --a1-d: #38BDF8;   --a2-d: #4ADE80;

  --bg-l: #F5F8FB;   --surface-l: #FFFFFF;  --surface-2-l: #E8F0F7;
  --fg-l: #07111F;   --muted-l: #4A5668;    --line-l: rgba(10, 40, 80, 0.12);
  --a1-l: #0369A1;   --a2-l: #15803D;
}

/* ---------- Light mode (system preference or toggle) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--bg-l); --surface: var(--surface-l); --surface-2: var(--surface-2-l);
    --fg: var(--fg-l); --muted: var(--muted-l); --line: var(--line-l);
    --a1: var(--a1-l); --a2: var(--a2-l);
    --tile: var(--tile-l); --tile-line: var(--tile-line-l);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: var(--bg-l); --surface: var(--surface-l); --surface-2: var(--surface-2-l);
  --fg: var(--fg-l); --muted: var(--muted-l); --line: var(--line-l);
  --a1: var(--a1-l); --a2: var(--a2-l);
  --tile: var(--tile-l); --tile-line: var(--tile-line-l);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--bg-d); --surface: var(--surface-d); --surface-2: var(--surface-2-d);
  --fg: var(--fg-d); --muted: var(--muted-d); --line: var(--line-d);
  --a1: var(--a1-d); --a2: var(--a2-d);
  --tile: var(--tile-d); --tile-line: var(--tile-line-d);
  color-scheme: dark;
}