/* TrueLake design system tokens. Exported October 10, 2026 from the TrueLake Design System.
   Light theme on :root; set data-theme="dark" on <html> for the dark theme.
   Fonts: Exo and Source Sans 3 (SIL Open Font License), files in fonts/. */

:root, [data-theme="light"] {
  /* Color */
  --brand-navy: #0b1f3a;
  --brand-sapphire: #002d72;
  --brand-royal: #1e88e5;
  --brand-cobalt: #2463eb;
  --brand-teal: #0fa3b1;
  --brand-sky: #b6e6fa;
  --brand-pearl: #f0f4f8;
  --brand-white: #ffffff;
  --brand-gold: #f9a825;
  --brand-coral: #ff6b5b;
  --brand-ivory: #fff8e1;
  --bg-canvas: #f0f4f8;
  --bg-surface: #ffffff;
  --bg-subtle: #e5eaf0;
  --bg-selected: #edf9ff;
  --bg-highlight: #b6e6fa;
  --bg-brand: #002d72;
  --bg-inverse: #0b1f3a;
  --text-primary: #0b1f3a;
  --text-secondary: #4b5b6e;
  --text-muted: #606f80;
  --text-disabled: #8895a4;
  --text-link: #0067c0;
  --text-link-hover: #0050a3;
  --text-brand: #002d72;
  --text-accent: #00646f;
  --text-on-brand: #ffffff;
  --text-on-action: #ffffff;
  --text-inverse: #f0f4f8;
  --border-subtle: #d2dae2;
  --border-default: #b4bfcb;
  --border-strong: #8895a4;
  --border-focus: #1e88e5;
  --action-primary: #0067c0;
  --action-primary-hover: #0050a3;
  --action-primary-pressed: #003d8a;
  --action-danger: #ba2b28;
  --action-danger-hover: #981c1d;
  --accent-teal: #0fa3b1;
  --success-text: #006933;
  --success-icon: #038342;
  --success-bg: #ecfcf0;
  --success-border: #b3edc5;
  --warning-text: #7e441d;
  --warning-icon: #f9a825;
  --warning-bg: #fff8e1;
  --warning-border: #ffe0a9;
  --danger-text: #981c1d;
  --danger-icon: #ba2b28;
  --danger-bg: #fff4f2;
  --danger-border: #ffcac1;
  --info-text: #0050a3;
  --info-icon: #0067c0;
  --info-bg: #edf9ff;
  --info-border: #b6e6fa;
  --chart-1: #1e88e5;
  --chart-2: #e34b41;
  --chart-3: #0fa3b1;
  --chart-4: #c37221;
  --chart-5: #d9589b;
  --chart-6: #dd6517;
  --chart-7: #9475ea;
  --chart-8: #30a75e;
  --chart-grid: #d2dae2;
  --chart-axis: #8895a4;
  --chart-midpoint: #e5eaf0;
  --chart-other: #8895a4;
  --gradient-start: #0fa3b1;
  --gradient-end: #002d72;
  --blue-50: #edf9ff;
  --blue-100: #d7f2ff;
  --blue-200: #b6e6fa;
  --blue-300: #7fccfa;
  --blue-400: #4cabf5;
  --blue-500: #1e88e5;
  --blue-600: #0067c0;
  --blue-700: #0050a3;
  --blue-800: #003d8a;
  --blue-900: #002d72;
  --blue-950: #031e52;
  --cobalt-50: #f0f6ff;
  --cobalt-100: #e2eefe;
  --cobalt-200: #c9defe;
  --cobalt-300: #a0c4fd;
  --cobalt-400: #72a6fc;
  --cobalt-500: #4584fc;
  --cobalt-600: #2463eb;
  --cobalt-700: #1c4dc1;
  --cobalt-800: #163b9d;
  --cobalt-900: #122c79;
  --cobalt-950: #0c1e56;
  --teal-50: #ebfafc;
  --teal-100: #d4f4f7;
  --teal-200: #afeaf0;
  --teal-300: #7cd7e0;
  --teal-400: #4abecb;
  --teal-500: #0fa3b1;
  --teal-600: #007e8b;
  --teal-700: #00646f;
  --teal-800: #004e58;
  --teal-900: #003a43;
  --teal-950: #00282f;
  --neutral-50: #f0f4f8;
  --neutral-100: #e5eaf0;
  --neutral-200: #d2dae2;
  --neutral-300: #b4bfcb;
  --neutral-400: #8895a4;
  --neutral-500: #606f80;
  --neutral-600: #4b5b6e;
  --neutral-700: #39495d;
  --neutral-800: #283950;
  --neutral-900: #182b43;
  --neutral-950: #0b1f3a;
  --green-50: #ecfcf0;
  --green-100: #d6f6e0;
  --green-200: #b3edc5;
  --green-300: #83db9f;
  --green-400: #55c37c;
  --green-500: #30a75e;
  --green-600: #038342;
  --green-700: #006933;
  --green-800: #005227;
  --green-900: #003e1c;
  --green-950: #022b12;
  --gold-50: #fff8e1;
  --gold-100: #fff0cc;
  --gold-200: #ffe0a9;
  --gold-300: #ffc771;
  --gold-400: #f9a825;
  --gold-500: #e58e17;
  --gold-600: #c37221;
  --gold-700: #a15a22;
  --gold-800: #7e441d;
  --gold-900: #5f3218;
  --gold-950: #462311;
  --coral-50: #fff4f2;
  --coral-100: #ffe5e0;
  --coral-200: #ffcac1;
  --coral-300: #ffa294;
  --coral-400: #ff6b5b;
  --coral-500: #e34b41;
  --coral-600: #ba2b28;
  --coral-700: #981c1d;
  --coral-800: #7a1517;
  --coral-900: #5e1112;
  --coral-950: #430b0c;
  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.12);
  --shadow-lg: 0 16px 40px rgba(11, 31, 58, 0.18);
}

[data-theme="dark"] {
  --bg-canvas: #0b1f3a;
  --bg-surface: #182b43;
  --bg-subtle: #283950;
  --bg-selected: #031e52;
  --bg-highlight: #002d72;
  --bg-brand: #003d8a;
  --bg-inverse: #f0f4f8;
  --text-primary: #f0f4f8;
  --text-secondary: #b4bfcb;
  --text-muted: #8895a4;
  --text-disabled: #4b5b6e;
  --text-link: #7fccfa;
  --text-link-hover: #b6e6fa;
  --text-brand: #7fccfa;
  --text-accent: #7cd7e0;
  --text-on-action: #0b1f3a;
  --text-inverse: #0b1f3a;
  --border-subtle: #283950;
  --border-default: #39495d;
  --border-focus: #4cabf5;
  --action-primary: #4cabf5;
  --action-primary-hover: #7fccfa;
  --action-primary-pressed: #b6e6fa;
  --action-danger: #ff6b5b;
  --action-danger-hover: #ffa294;
  --accent-teal: #4abecb;
  --success-text: #83db9f;
  --success-icon: #55c37c;
  --success-bg: #022b12;
  --success-border: #005227;
  --warning-text: #ffc771;
  --warning-bg: #462311;
  --warning-border: #7e441d;
  --danger-text: #ffa294;
  --danger-icon: #ff6b5b;
  --danger-bg: #430b0c;
  --danger-border: #7a1517;
  --info-text: #7fccfa;
  --info-icon: #4cabf5;
  --info-bg: #031e52;
  --info-border: #003d8a;
  --chart-grid: #283950;
  --chart-axis: #4b5b6e;
  --chart-midpoint: #39495d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

:root {
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  /* Size */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --container-max: 1280px;
  /* Breakpoint */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  /* Font families */
  --font-display: "Exo", "Segoe UI", system-ui, sans-serif;
  --font-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Type styles */
.display-black { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 900; letter-spacing: -0.012em; }
.display { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.01em; }
.heading-1 { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.005em; }
.heading-2 { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; }
.heading-3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.heading-4 { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 600; }
.body-lg { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 400; }
.overline { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.metric { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 700; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

/* Fonts */