/* ============================================================
   AIKraft — Design Tokens (single source of truth)
   Link this BEFORE styles.css on every page.

   Theme rule (TZ A2):
   - Default surface is LIGHT. The whole shell — header, hero,
     cards, prose — is light.
   - DARK is allowed ONLY as a deliberate accent for dense data
     blocks (benchmarks / providers / comparison tables). Wrap
     such a block in `.data-block` and it becomes a dark island
     regardless of page theme.
   - The global dark theme (data-theme="dark") still exists and
     the header toggle flips the entire page to it.
   ============================================================ */

:root {
  /* Base palette (dark values live here; pages opt into light
     via [data-theme="light"], which every page sets by default) */
  --bg: #0E1116;
  --bg-elev: #15171C;
  --bg-elev-2: #1A1D24;
  --bg-hover: #1E2129;
  --border: #232730;
  --border-strong: #2E333E;
  --text: #E6E8EB;
  --text-2: #A4ABBA;
  --text-3: #6B7280;
  --text-mute: #4B5563;

  /* Semantic surface aliases (TZ A2) */
  --surface: var(--bg);
  --surface-elev: var(--bg-elev);

  /* Accent (indigo by default) */
  --accent: #6366F1;
  --accent-hover: #7C7FF5;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --accent-border: rgba(99, 102, 241, 0.32);

  /* Semantic — confidence/status */
  --green: #10B981;            /* verified */
  --green-soft: rgba(16, 185, 129, 0.12);
  --red: #F43F5E;              /* error / breaking */
  --red-soft: rgba(244, 63, 94, 0.12);
  --amber: #F59E0B;            /* provisional / warning */
  --amber-soft: rgba(245, 158, 11, 0.14);
  --blue: #3B82F6;
  --blue-soft: rgba(59, 130, 246, 0.14);

  /* Provider tints (logo bg only) */
  --tint-openai: #10A37F;
  --tint-anthropic: #D97757;
  --tint-google: #4285F4;
  --tint-meta: #1877F2;
  --tint-mistral: #FA520F;
  --tint-deepseek: #4D6BFE;
  --tint-xai: #888888;
  --tint-alibaba: #FF6A00;
  --tint-yandex: #FC3F1D;
  --tint-sber: #21A038;
  --tint-tbank: #FFDD2D;

  /* Geometry */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Spacing scale */
  --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-12: 48px;

  /* Density */
  --row-h: 44px;
  --row-pad-y: 12px;
  --row-pad-x: 14px;

  /* Type */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);

  /* Container */
  --container: 1280px;
}

/* ---------- Light theme (default shell on every page) ---------- */
[data-theme="light"] {
  --bg: #FAFAF9;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #FFFFFF;
  --bg-hover: #F4F4F3;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #111827;
  --text-2: #4B5563;
  --text-3: #6B7280;
  --text-mute: #9CA3AF;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.10);
}

/* ---------- Dark data island (TZ A2) ----------
   Dark, dense surface usable inside a light page. Re-declares the
   dark palette locally so any descendant using the tokens turns
   dark automatically — no component rewrites needed. */
.data-block {
  --bg: #0E1116;
  --bg-elev: #15171C;
  --bg-elev-2: #1A1D24;
  --bg-hover: #1E2129;
  --border: #232730;
  --border-strong: #2E333E;
  --text: #E6E8EB;
  --text-2: #A4ABBA;
  --text-3: #6B7280;
  --text-mute: #4B5563;
  --shadow-md: 0 10px 34px rgba(2,6,23,.20);
  color: var(--text);
  background: var(--bg-elev);
}
/* a data island already sitting on a dark page needs no special bg */
[data-theme="dark"] .data-block { box-shadow: none; }

/* optional kicker label to mark a dark data island */
.data-block-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.data-block-label .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Accents ---------- */
[data-accent="indigo"] {
  --accent: #6366F1; --accent-hover: #7C7FF5;
  --accent-soft: rgba(99,102,241,.12); --accent-border: rgba(99,102,241,.32);
}
[data-accent="green"] {
  --accent: #10B981; --accent-hover: #34D399;
  --accent-soft: rgba(16,185,129,.12); --accent-border: rgba(16,185,129,.32);
}
[data-accent="amber"] {
  --accent: #F59E0B; --accent-hover: #FBBF24;
  --accent-soft: rgba(245,158,11,.14); --accent-border: rgba(245,158,11,.36);
}

/* ---------- Density ---------- */
[data-density="compact"] {
  --row-h: 36px; --row-pad-y: 8px; --row-pad-x: 12px;
}
[data-density="comfortable"] {
  --row-h: 52px; --row-pad-y: 16px; --row-pad-x: 18px;
}