/* =========================================================
   Optimus Review - Design Tokens (merged flagship spec)
   Base: flagship-2 (winner), extended with flagship-3's five-state
   status token groups and color-scheme declarations.
   Light palette lives on :root. Dark overrides follow, guarded so an
   explicit [data-theme] choice always wins over system preference.
   ========================================================= */

:root {
  /* ---- Type ---- */
  --font-head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Surfaces ---- */
  --bg: #ffffff;
  --bg-subtle: #f4f5f8;
  --bg-card: #ffffff;
  --bg-inset: #eef0f5;
  --bg-header: rgba(255, 255, 255, 0.92);

  /* ---- Borders ---- */
  --border: #e1e3ea;
  --border-strong: #c8cbd6;

  /* ---- Text ---- */
  --text: #13151b;
  --text-muted: #565b68;
  --text-faint: #5f6370;
  --text-on-accent: #ffffff;

  /* ---- Brand accent (deliberately not Tesla red / not Tesla trade dress) ---- */
  --accent: #3a4de0;
  --accent-strong: #2c3bc0;
  --accent-soft: #eceffd;
  --accent-soft-border: #ccd3fa;

  /* ---- Generic status semantics (callouts, banners) ---- */
  --ok: #15803d;
  --ok-bg: #e4f6ea;
  --ok-border: #a7dfb8;

  --warn: #92620a;
  --warn-bg: #fdf2d9;
  --warn-border: #f0cd83;

  --danger: #b91c1c;
  --danger-bg: #fdecec;
  --danger-border: #f3aeae;

  --info: #1d5fae;
  --info-bg: #e9f2fc;
  --info-border: #b7d6f4;

  /* ---- Editorial status taxonomy: badges + legend dots ----
     Five states used on every claim: Confirmed, Reported,
     Unconfirmed / rumored, Missed target, Forward target.
     Plus st-warn for "not available" banners (preorder, lease). */
  --st-confirmed-text: #146c3e;
  --st-confirmed-bg: #e1f4ea;
  --st-confirmed-border: #b6e2c9;
  --st-confirmed-dot: #1f9d5c;

  --st-reported-text: #17588f;
  --st-reported-bg: #e3f0fb;
  --st-reported-border: #bcdaf3;
  --st-reported-dot: #2686d1;

  --st-unconfirmed-text: #8a5a09;
  --st-unconfirmed-bg: #fbf0da;
  --st-unconfirmed-border: #f0dcac;
  --st-unconfirmed-dot: #c98a1b;

  --st-missed-text: #a3222c;
  --st-missed-bg: #fbe7e8;
  --st-missed-border: #f1c3c6;
  --st-missed-dot: #cf3641;

  --st-target-text: #6a3197;
  --st-target-bg: #f1e7f9;
  --st-target-border: #ddc4ee;
  --st-target-dot: #8e4dc4;

  --st-warn-text: #7a1720;
  --st-warn-bg: #fbe2e3;
  --st-warn-border: #eeb7ba;
  --st-warn-dot: #b8232d;

  /* ---- Shadow / elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06), 0 1px 1px rgba(20, 22, 30, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 22, 30, 0.08), 0 2px 6px rgba(20, 22, 30, 0.05);

  /* ---- Radius / rhythm ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --space-unit: 8px;

  --max-width: 1180px;
  --measure: 72ch;

  color-scheme: light;
}

/* ---- Dark mode: system preference (no explicit choice made) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c11;
    --bg-subtle: #121319;
    --bg-card: #15171f;
    --bg-inset: #1b1d27;
    --bg-header: rgba(11, 12, 17, 0.85);

    --border: #262832;
    --border-strong: #32353f;

    --text: #eef0f4;
    --text-muted: #a6abb8;
    --text-faint: #8b90a0;
    --text-on-accent: #ffffff;

    --accent: #8792f5;
    --accent-strong: #a4adf7;
    --accent-soft: #1c1f3d;
    --accent-soft-border: #333a72;

    --ok: #4fd07f;
    --ok-bg: #10261a;
    --ok-border: #1f5636;

    --warn: #f3b93f;
    --warn-bg: #2c2109;
    --warn-border: #6b4f13;

    --danger: #f38b8b;
    --danger-bg: #2b1414;
    --danger-border: #6e2626;

    --info: #79b6f2;
    --info-bg: #101d2c;
    --info-border: #234a5c;

    --st-confirmed-text: #6fdba0;
    --st-confirmed-bg: #123024;
    --st-confirmed-border: #1f5a41;
    --st-confirmed-dot: #3ed486;

    --st-reported-text: #7ec2f4;
    --st-reported-bg: #0f2a3f;
    --st-reported-border: #1c4d6d;
    --st-reported-dot: #4aa8e6;

    --st-unconfirmed-text: #eec474;
    --st-unconfirmed-bg: #302408;
    --st-unconfirmed-border: #5c4413;
    --st-unconfirmed-dot: #e0a836;

    --st-missed-text: #f2969c;
    --st-missed-bg: #341015;
    --st-missed-border: #632028;
    --st-missed-dot: #e5545f;

    --st-target-text: #cba3ea;
    --st-target-bg: #251534;
    --st-target-border: #472764;
    --st-target-dot: #a869d9;

    --st-warn-text: #f6a2a7;
    --st-warn-bg: #360f13;
    --st-warn-border: #6c1e24;
    --st-warn-dot: #e64750;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

/* ---- Dark mode: explicit toggle wins in both directions ---- */
:root[data-theme="dark"] {
  --bg: #0b0c11;
  --bg-subtle: #121319;
  --bg-card: #15171f;
  --bg-inset: #1b1d27;
  --bg-header: rgba(11, 12, 17, 0.85);

  --border: #262832;
  --border-strong: #32353f;

  --text: #eef0f4;
  --text-muted: #a6abb8;
  --text-faint: #8b90a0;
  --text-on-accent: #ffffff;

  --accent: #8792f5;
  --accent-strong: #a4adf7;
  --accent-soft: #1c1f3d;
  --accent-soft-border: #333a72;

  --ok: #4fd07f;
  --ok-bg: #10261a;
  --ok-border: #1f5636;

  --warn: #f3b93f;
  --warn-bg: #2c2109;
  --warn-border: #6b4f13;

  --danger: #f38b8b;
  --danger-bg: #2b1414;
  --danger-border: #6e2626;

  --info: #79b6f2;
  --info-bg: #101d2c;
  --info-border: #234a5c;

  --st-confirmed-text: #6fdba0;
  --st-confirmed-bg: #123024;
  --st-confirmed-border: #1f5a41;
  --st-confirmed-dot: #3ed486;

  --st-reported-text: #7ec2f4;
  --st-reported-bg: #0f2a3f;
  --st-reported-border: #1c4d6d;
  --st-reported-dot: #4aa8e6;

  --st-unconfirmed-text: #eec474;
  --st-unconfirmed-bg: #302408;
  --st-unconfirmed-border: #5c4413;
  --st-unconfirmed-dot: #e0a836;

  --st-missed-text: #f2969c;
  --st-missed-bg: #341015;
  --st-missed-border: #632028;
  --st-missed-dot: #e5545f;

  --st-target-text: #cba3ea;
  --st-target-bg: #251534;
  --st-target-border: #472764;
  --st-target-dot: #a869d9;

  --st-warn-text: #f6a2a7;
  --st-warn-bg: #360f13;
  --st-warn-border: #6c1e24;
  --st-warn-dot: #e64750;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}