/* DataByte Migration Tracker — design tokens.
   Source of truth: docs/superpowers/specs/2026-07-02-design-system.md
   Derived from the DataByte brand (DataByteMT/brand-voice → visual-identity.md).
   Light is the default; dark applies via OS preference OR an explicit [data-theme="dark"]. */

:root {
  /* Primary — teal */
  --teal-50:#E8F7F2; --teal-100:#C7ECE0; --teal-200:#97DCC8; --teal-300:#5FC7AC;
  --teal-400:#2DB393; --teal-500:#00A882; --teal-600:#008A6E; --teal-700:#006E5B;
  --teal-800:#005349; --teal-900:#003D37; --teal-950:#00231F;

  /* Gold — anniversary accent */
  --gold-50:#FBF3E1; --gold-100:#F5E1B8; --gold-200:#EECB82; --gold-300:#E2B04C;
  --gold-400:#D19E2E; --gold-500:#C4901F; --gold-600:#A17417; --gold-700:#7E5A12;
  --gold-800:#5C420E; --gold-900:#3D2C09; --gold-950:#241A05;

  /* Neutrals — cool, teal-tinted */
  --n-50:#F5F7F8; --n-100:#EAEDEF; --n-200:#DBE0E3; --n-300:#C2C9CD; --n-400:#97A0A5;
  --n-500:#6F787D; --n-600:#545C61; --n-700:#414A4E; --n-800:#2C3235; --n-900:#171D20; --n-950:#0B0F11;

  /* Radius / space / shadow */
  --radius-sm:6px; --radius:8px; --radius-lg:10px; --radius-xl:14px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --shadow-1:0 1px 2px rgba(8,21,28,.06); --shadow-2:0 4px 14px rgba(8,21,28,.08);

  /* Type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-h1:clamp(22px,3vw,28px); --fs-h2:20px; --fs-h3:13px; --fs-body:14px; --fs-sm:12px;
  --lh:1.5; --lh-tight:1.2;

  /* Semantic — LIGHT */
  --color-bg:var(--n-50);
  --color-surface:#FFFFFF;
  --color-surface-2:var(--n-50);
  --color-border:var(--n-200);
  --color-text-strong:var(--n-900);
  --color-text:var(--n-800);
  --color-text-muted:var(--n-500);
  --color-primary:var(--teal-900);
  --color-primary-hover:var(--teal-800);
  --color-on-primary:#FFFFFF;
  --color-accent:var(--teal-500);
  --color-link:var(--teal-700);
  --color-gold:var(--gold-500);
  --color-focus:var(--teal-500);
  --color-nav-bg:var(--teal-900);
  --color-nav-fg:#FFFFFF;

  --color-success-bg:#E7F6ED; --color-success-fg:#15803D; --color-success-border:#A6E4BF;
  --color-warning-bg:var(--gold-100); --color-warning-fg:var(--gold-700); --color-warning-border:var(--gold-200);
  --color-danger-bg:#FDECEA; --color-danger-fg:#B42318; --color-danger-border:#F3C0BA;
  --color-info-bg:var(--teal-50); --color-info-fg:var(--teal-700); --color-info-border:var(--teal-200);

  --step-pending-bg:var(--n-100); --step-pending-fg:var(--n-600);
  --step-progress-bg:var(--color-warning-bg); --step-progress-fg:var(--color-warning-fg);
  --step-done-bg:var(--color-success-bg); --step-done-fg:var(--color-success-fg);
  --step-skipped-bg:var(--n-100); --step-skipped-fg:var(--n-400);
}

/* Dark overrides — deep teal-charcoal (DataByte-consistent, NOT bitKode navy). */
:root[data-theme="dark"] {
  --color-bg:#0B1613;
  --color-surface:#12201B;
  --color-surface-2:#0E1A16;
  --color-border:#26362F;
  --color-text-strong:#EAF2EE;
  --color-text:#CFDAD5;
  --color-text-muted:#8A968F;
  --color-primary:var(--teal-400);
  --color-primary-hover:var(--teal-300);
  --color-on-primary:#04231E;
  --color-accent:var(--teal-400);
  --color-link:var(--teal-300);
  --color-gold:var(--gold-300);
  --color-focus:var(--teal-400);
  --color-nav-bg:#0E1A16;
  --color-nav-fg:#EAF2EE;

  --color-success-bg:#0F2A1D; --color-success-fg:#4ADE80; --color-success-border:#1E5D3C;
  --color-warning-bg:#2E2410; --color-warning-fg:#E2B04C; --color-warning-border:#5C420E;
  --color-danger-bg:#331714; --color-danger-fg:#F1988C; --color-danger-border:#7A2B22;
  --color-info-bg:#0F2A24; --color-info-fg:#5FC7AC; --color-info-border:#005349;

  --step-pending-bg:#1C2A24; --step-pending-fg:var(--n-300);
  --step-skipped-bg:#1C2A24; --step-skipped-fg:var(--n-400);
}

/* OS preference is the default when the user hasn't explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:#0B1613;
    --color-surface:#12201B;
    --color-surface-2:#0E1A16;
    --color-border:#26362F;
    --color-text-strong:#EAF2EE;
    --color-text:#CFDAD5;
    --color-text-muted:#8A968F;
    --color-primary:var(--teal-400);
    --color-primary-hover:var(--teal-300);
    --color-on-primary:#04231E;
    --color-accent:var(--teal-400);
    --color-link:var(--teal-300);
    --color-gold:var(--gold-300);
    --color-focus:var(--teal-400);
    --color-nav-bg:#0E1A16;
    --color-nav-fg:#EAF2EE;

    --color-success-bg:#0F2A1D; --color-success-fg:#4ADE80; --color-success-border:#1E5D3C;
    --color-warning-bg:#2E2410; --color-warning-fg:#E2B04C; --color-warning-border:#5C420E;
    --color-danger-bg:#331714; --color-danger-fg:#F1988C; --color-danger-border:#7A2B22;
    --color-info-bg:#0F2A24; --color-info-fg:#5FC7AC; --color-info-border:#005349;

    --step-pending-bg:#1C2A24; --step-pending-fg:var(--n-300);
    --step-skipped-bg:#1C2A24; --step-skipped-fg:var(--n-400);
  }
}