/* ============================================================
   SuperSORT design tokens — one source of truth for the whole site.

   BRAND DIRECTION: navy primary + red accent, green reserved for
   routes / active / success (matches the SUPER·SORT wordmark).

   To flip the whole app to a green-primary identity later, change
   ONLY the two "--primary" lines in the PRIMARY blocks below (one
   for light, one for dark). Nothing else needs to move.
   ============================================================ */
:root{
  /* Brand ---------------------------------------------------- */
  --brand-navy:#1a2b4a;  --brand-navy-ink:#ffffff;
  --brand-red:#d6191f;   --brand-red-ink:#ffffff;
  --brand-green:#1d9e75; --brand-green-ink:#ffffff;

  /* PRIMARY (interactive identity) — the one lever to flip look */
  --primary:var(--brand-navy); --primary-ink:var(--brand-navy-ink); --primary-hover:#152340;

  /* Semantic accents */
  --accent:var(--brand-green); --accent-ink:#ffffff;   /* route / success / active */
  --danger:#a32d2d; --danger-bright:var(--brand-red); --danger-bright-hover:#b9151a;
  --link:#1d5fb0;

  /* Surfaces / ink */
  --bg:#f4f5f2; --surface:#ffffff; --card:#ffffff; --panel:#faf9f6;
  --hero-bg:#eef2f8;
  --ink:#1c1d1a; --muted:#6b6c66;
  --border:#e2e3dd; --border-input:#d3d1c7; --input-bg:#ffffff;

  /* Status */
  --ok:#0f6e56; --ok-bg:#e1f5ee; --err:#a32d2d; --err-bg:#fceaea;
  --chip-bg:#f1efe8; --track:#f1efe8;
  --invited-bg:#faeeda; --invited-ink:#854f0b;
  --pace-good:#0f6e56; --pace-warn:#a36b00; --pace-bad:#a32d2d;

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* Radii */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;

  /* Elevation */
  --shadow-sm:0 1px 3px rgba(20,30,60,.06);
  --shadow:0 4px 16px rgba(20,30,60,.10);
  --shadow-lg:0 12px 40px rgba(20,30,60,.16);

  /* Focus */
  --focus:#1a2b4a;
  --ring:0 0 0 3px rgba(26,43,74,.20);

  /* Minimum comfortable tap target on touch surfaces */
  --tap:44px;
}

[data-theme="dark"]{
  --brand-navy:#3b5a9a;  --brand-navy-ink:#ffffff;
  --brand-red:#ff5252;   --brand-red-ink:#0a0f1a;
  --brand-green:#28b889; --brand-green-ink:#06120d;

  /* PRIMARY (dark) — navy is too dark on a dark bg, so lift it */
  --primary:#4a76c4; --primary-ink:#0a0f1a; --primary-hover:#5a86d4;

  --accent:#28b889; --accent-ink:#06120d;
  --danger:#ff7a7a; --danger-bright:#ff5252; --danger-bright-hover:#e04545;
  --link:#6aa9f0;

  --bg:#16171b; --surface:#1f2126; --card:#1f2126; --panel:#1a1b20;
  --hero-bg:#e6ebf3;
  --ink:#e9eaec; --muted:#9a9ca5;
  --border:#33353c; --border-input:#3a3c44; --input-bg:#26282e;

  --ok:#3ecf9a; --ok-bg:#173429; --err:#ff7a7a; --err-bg:#3a2222;
  --chip-bg:#2a2c33; --track:#2a2c33;
  --invited-bg:#3d3320; --invited-ink:#e0b870;
  --pace-good:#3ecf9a; --pace-warn:#e0a83e; --pace-bad:#ff7a7a;

  --shadow-sm:0 1px 3px rgba(0,0,0,.40);
  --shadow:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);

  --focus:#6aa9f0;
  --ring:0 0 0 3px rgba(120,160,230,.30);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}