/**
 * Cobalt Brand — CSS Design Tokens
 * Bold, durable, trusted. Cobalt blue on cool navy neutrals.
 * Import once at the root of your app.
 */

:root {
  /* ─── Primary — Cobalt Blue ──────────────────────────────────────── */
  --color-cobalt-pale:    #EFF4FF;
  --color-cobalt-light:   #3B82F6;
  --color-cobalt:         #0047AB;
  --color-cobalt-dark:    #003380;
  --color-cobalt-black:   #001F4D;

  /* ─── Neutrals — blue-undertone ──────────────────────────────────── */
  --color-ink:          #050914;
  --color-midnight:     #0A1224;
  --color-slate:        #13203A;
  --color-storm:        #263656;
  --color-muted:        #5A6B85;
  --color-muted-light:  #8A99B3;
  --color-navy:         #0F1A30;
  --color-border:       #DCE3EE;
  --color-cloud:        #F5F7FB;
  --color-white:        #FFFFFF;

  /* ─── RGB channels (for rgba shadows/overlays) ───────────────────── */
  --color-cobalt-rgb:   0, 71, 171;

  /* ─── Main Accent — Teal ─────────────────────────────────────────── */
  --color-teal-pale:    #ECFEFF;
  --color-teal-light:   #22D3EE;
  --color-teal:         #0891B2;
  --color-teal-dark:    #0E7490;
  --color-teal-deep:    #164E63;

  /* ─── Semantic ───────────────────────────────────────────────────── */
  --color-pine:         #047857;
  --color-amber:        #B45309;
  --color-red:          #DC2626;
  --color-violet:       #7C3AED;
  --color-pass:         #047857;
  --color-warn:         #B45309;
  --color-fail:         #DC2626;

  /* ─── Typography — Archivo display, Inter body, JetBrains Mono ──── */
  --font-display:          'Archivo', sans-serif;
  --font-sans:             'Inter', sans-serif;
  --font-mono:             'JetBrains Mono', monospace;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-bold:      600;
  --font-weight-extrabold: 800;

  /* ─── Font Sizes ─────────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;

  /* ─── Letter Spacing ─────────────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;

  /* ─── Border Radius — slightly sharper, industrial ──────────────── */
  --radius-sm:   3px;
  --radius:      5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 9999px;

  /* ─── Shadows — tinted with the cobalt primary ──────────────────── */
  --shadow-sm:        0 1px 3px rgba(var(--color-cobalt-rgb),0.06);
  --shadow:           0 2px 8px rgba(var(--color-cobalt-rgb),0.08);
  --shadow-md:        0 4px 16px rgba(var(--color-cobalt-rgb),0.10);
  --shadow-lg:        0 8px 32px rgba(var(--color-cobalt-rgb),0.14);
  --shadow-cobalt:    0 4px 24px rgba(var(--color-cobalt-rgb),0.28);
  --shadow-cobalt-lg: 0 8px 40px rgba(var(--color-cobalt-rgb),0.38);

  /* ─── Transitions ────────────────────────────────────────────────── */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Semantic Aliases — light mode (default) ────────────────────── */
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-cloud);
  --bg-surface:        var(--color-white);
  --text-primary:      var(--color-navy);
  --text-secondary:    var(--color-muted);
  --text-accent:       var(--color-cobalt);
  --border-default:    var(--color-border);
  --interactive:       var(--color-cobalt);
  --interactive-hover: var(--color-cobalt-dark);
}

/* ─── Dark Mode Overrides ──────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --bg-primary:        var(--color-midnight);
  --bg-secondary:      var(--color-slate);
  --bg-surface:        var(--color-slate);
  --text-primary:      var(--color-cloud);
  --text-secondary:    var(--color-muted-light);
  --text-accent:       var(--color-cobalt-light);
  --border-default:    var(--color-storm);
  --interactive:       var(--color-cobalt-light);
  --interactive-hover: var(--color-cobalt);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-primary:        var(--color-midnight);
    --bg-secondary:      var(--color-slate);
    --text-primary:      var(--color-cloud);
    --text-secondary:    var(--color-muted-light);
    --text-accent:       var(--color-cobalt-light);
    --border-default:    var(--color-storm);
    --interactive:       var(--color-cobalt-light);
    --interactive-hover: var(--color-cobalt);
  }
}

/* ─── Base Resets ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* ─── Utility Classes ──────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-tight); }
.font-ui      { font-family: var(--font-sans); }
.font-data    { font-family: var(--font-mono); }
.text-accent  { color: var(--text-accent); }
.text-muted   { color: var(--text-secondary); }