/* ==========================================================
   Design tokens
   Dark  = "Harbor Night": navy + black, lamp gold, signal purple
   Light = "Harbor Day":   steel-blue paper, ink navy, deep violet
   ========================================================== */

:root {
  /* Brand primitives (from the lighthouse-K logo) */
  --navy-950: #070b1a;
  --navy-900: #0a1128;
  --navy-850: #0f1834;
  --navy-800: #142046;
  --navy-700: #1d2b5c;
  --black: #05060a;
  --gold-400: #f6c453;
  --gold-500: #f2b53a;
  --gold-700: #b07b0d;
  --purple-400: #9b83ff;
  --purple-500: #7b5cff;
  --purple-700: #5136d6;
  --orange-500: #ff7a2f;
  --orange-700: #d6541a;
  --grey-300: #c6ccda;
  --grey-500: #8d96ad;
  --grey-700: #4a5370;
  --teal-500: #2fd3a7; /* status: success / live */
  --red-500: #ff5d6c; /* status: failed */

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.25rem, 4vw, 3.25rem);

  /* Space + shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --sidebar-w: 284px;
  --header-h: 68px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;

  color-scheme: dark;
}

/* ---------- Dark theme (default) ---------- */
:root,
:root[data-theme='dark'] {
  --bg: var(--navy-950);
  --bg-grad-1: rgba(123, 92, 255, 0.16);
  --bg-grad-2: rgba(242, 181, 58, 0.08);
  --surface: rgba(20, 32, 70, 0.55);
  --surface-solid: #111a38;
  --surface-2: rgba(29, 43, 92, 0.55);
  --surface-sunk: rgba(5, 6, 10, 0.45);
  --sidebar-bg: rgba(5, 6, 10, 0.78);
  --line: rgba(198, 204, 218, 0.12);
  --line-strong: rgba(198, 204, 218, 0.24);
  --text: #e9ecf5;
  --text-2: #b5bdd1;
  --text-3: #8d96ad;
  --primary: var(--purple-500);
  --primary-ink: #ffffff;
  --primary-soft: rgba(123, 92, 255, 0.18);
  --accent: var(--gold-500);
  --accent-ink: #1a1203;
  --accent-soft: rgba(242, 181, 58, 0.16);
  --hot: var(--orange-500);
  --hot-soft: rgba(255, 122, 47, 0.16);
  --ok: var(--teal-500);
  --ok-soft: rgba(47, 211, 167, 0.15);
  --bad: var(--red-500);
  --glass-blur: 18px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 30px 80px rgba(0, 0, 0, 0.55);
  --beam: rgba(246, 196, 83, 0.22);
  color-scheme: dark;
}

/* ---------- Light theme: "Harbor Day" ---------- */
:root[data-theme='light'] {
  --bg: #e8eef7;
  --bg-grad-1: rgba(91, 63, 224, 0.12);
  --bg-grad-2: rgba(227, 98, 27, 0.08);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-2: rgba(240, 244, 251, 0.9);
  --surface-sunk: rgba(14, 26, 59, 0.05);
  --sidebar-bg: rgba(14, 26, 59, 0.96);
  --line: rgba(14, 26, 59, 0.1);
  --line-strong: rgba(14, 26, 59, 0.2);
  --text: #0e1a3b;
  --text-2: #36426a;
  --text-3: #5d6888;
  --primary: #5b3fe0;
  --primary-ink: #ffffff;
  --primary-soft: rgba(91, 63, 224, 0.12);
  --accent: #b97a06;
  --accent-ink: #ffffff;
  --accent-soft: rgba(201, 138, 11, 0.14);
  --hot: #d9561a;
  --hot-soft: rgba(227, 98, 27, 0.12);
  --ok: #0f9a74;
  --ok-soft: rgba(15, 154, 116, 0.12);
  --bad: #d23246;
  --shadow-1: 0 1px 2px rgba(14, 26, 59, 0.06), 0 12px 28px rgba(14, 26, 59, 0.08);
  --shadow-2: 0 30px 80px rgba(14, 26, 59, 0.22);
  --beam: rgba(242, 181, 58, 0.28);
  color-scheme: light;
}

/* Sidebar stays dark in both themes (HubSpot/GHL convention) */
:root {
  --side-text: #e9ecf5;
  --side-text-2: #aab3c9;
  --side-line: rgba(198, 204, 218, 0.12);
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-active: rgba(123, 92, 255, 0.22);
}
