/**
 * Spyglass Brand — CSS Design Tokens
 * Sharp, analytical, precise. Ocean teal. Neutral on light/dark.
 * Import once at the root of your app.
 */

:root {
  /* ─── Primary — Ocean Teal ───────────────────────────────────────── */
  --color-teal-pale:    #ECFEFF;
  --color-teal-light:   #22D3EE;
  --color-teal:         #0891B2;
  --color-teal-dark:    #0E7490;
  --color-teal-black:   #164E63;

  /* ─── Neutrals — cool blue-grey ──────────────────────────────────── */
  --color-ink:          #060B10;
  --color-midnight:     #0C1520;
  --color-slate:        #162230;
  --color-storm:        #253647;
  --color-muted:        #64748B;
  --color-muted-light:  #94A3B8;
  --color-navy:         #0F172A;
  --color-border:       #E2E8F0;
  --color-cloud:        #F4F8FA;
  --color-white:        #FFFFFF;

  /* ─── RGB channels (for rgba shadows/overlays) ───────────────────── */
  --color-teal-rgb:     8, 145, 178;

  /* ─── Main Accent — Indigo ───────────────────────────────────────── */
  --color-indigo-pale:  #EEF2FF;
  --color-indigo-light: #818CF8;
  --color-indigo:       #4F46E5;
  --color-indigo-dark:  #4338CA;
  --color-indigo-deep:  #1E1B4B;

  /* ─── Semantic ───────────────────────────────────────────────────── */
  --color-coral:        #EF6C57;
  --color-sapphire:     #2563EB;
  --color-plum:         #9333EA;
  --color-amber:        #B45309;
  --color-pine:         #047857;
  --color-pass:         #047857;
  --color-warn:         #B45309;
  --color-fail:         #EF6C57;

  /* ─── Typography — IBM Plex family (technical, trustworthy) ──────── */
  --font-display:          'IBM Plex Sans', sans-serif;
  --font-sans:             'IBM Plex Sans', sans-serif;
  --font-mono:             'IBM Plex Mono', monospace;

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

  /* ─── 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 — precise, measured ────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;

  /* ─── Border Radius — clean, moderate ───────────────────────────── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ─── Shadows — clean, directional ──────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(var(--color-teal-rgb),0.06);
  --shadow:          0 2px 8px rgba(var(--color-teal-rgb),0.08);
  --shadow-md:       0 4px 16px rgba(var(--color-teal-rgb),0.10);
  --shadow-lg:       0 8px 32px rgba(var(--color-teal-rgb),0.14);
  --shadow-teal:     0 4px 24px rgba(var(--color-teal-rgb),0.25);
  --shadow-teal-lg:  0 8px 40px rgba(var(--color-teal-rgb),0.35);

  /* ─── 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-teal);
  --border-default:    var(--color-border);
  --interactive:       var(--color-teal);
  --interactive-hover: var(--color-teal-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-teal-light);
  --border-default:    var(--color-storm);
  --interactive:       var(--color-teal-light);
  --interactive-hover: var(--color-teal);
}

@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-teal-light);
    --border-default:    var(--color-storm);
    --interactive:       var(--color-teal-light);
    --interactive-hover: var(--color-teal);
  }
}

/* ─── 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: 700; 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); }