/* Gold & Teal Theme — design tokens
   Usage: <html data-theme="light"> or <html data-theme="dark">
   Use semantic tokens (--bg-surface, --accent …) in your code; primitives are for reference. */
:root {
  /* Primitives (same in both themes) */
  --gold-50: #FBF7EC;
  --gold-100: #F4EBD0;
  --gold-200: #E9D7A6;
  --gold-300: #DCC17C;
  --gold-400: #D2B26A;
  --gold-500: #C9A85C;
  --gold-600: #A88A45;
  --gold-700: #866C35;
  --gold-800: #5F4D27;
  --gold-900: #3A2F19;
  --gold-950: #211B0F;
  --teal-50: #EBF7FB;
  --teal-100: #D3EEF6;
  --teal-200: #A6DCEC;
  --teal-300: #6EC3DD;
  --teal-400: #34A3C6;
  --teal-500: #1291B8;
  --teal-600: #0E7FA6;
  --teal-700: #0B6888;
  --teal-800: #0A526B;
  --teal-900: #083E51;
  --teal-950: #052733;
  --slate-0: #FFFFFF;
  --slate-25: #FAFBFC;
  --slate-50: #F5F6F8;
  --slate-100: #EEF0F2;
  --slate-200: #E4E7EB;
  --slate-300: #D0D5DB;
  --slate-400: #9CA3AF;
  --slate-500: #5B6270;
  --slate-600: #4B5563;
  --slate-700: #374151;
  --slate-800: #1F2328;
  --slate-900: #111418;
  --charcoal-100: #EDEDED;
  --charcoal-200: #CFCFCF;
  --charcoal-300: #A3A3A3;
  --charcoal-400: #7A7A7B;
  --charcoal-500: #555556;
  --charcoal-600: #3A3A3B;
  --charcoal-700: #2B2B2C;
  --charcoal-750: #232324;
  --charcoal-800: #1C1C1D;
  --charcoal-850: #161617;
  --charcoal-900: #111112;
  --charcoal-950: #0B0B0C;
  --green-50: #E9F7EF;
  --green-400: #4ADE80;
  --green-600: #15803D;
  --green-950: #12241A;
  --red-50: #FCEBEB;
  --red-400: #F87171;
  --red-600: #C62828;
  --red-950: #2C1617;
  --amber-50: #FEF4E4;
  --amber-400: #FBBF24;
  --amber-700: #B45309;
  --amber-950: #2A2112;
  --blue-50: #EAF1FE;
  --blue-400: #60A5FA;
  --blue-700: #1D4ED8;
  --blue-950: #15203A;

  /* Spacing */
  --space-0: 0;
  --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;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Sizes */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --sidebar-width: 248px;
  --header-height: 64px;

  /* Fonts */
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
}

/* Light theme */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: var(--slate-50);
  --bg-surface: var(--slate-0);
  --bg-raised: var(--slate-0);
  --bg-sunken: var(--slate-100);
  --bg-hover: var(--slate-50);
  --bg-selected: var(--slate-100);
  --border-subtle: var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong: var(--slate-300);
  --text-primary: var(--slate-800);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-400);
  --text-inverse: var(--slate-0);
  --accent: var(--teal-600);
  --accent-hover: var(--teal-700);
  --accent-pressed: var(--teal-800);
  --accent-subtle: var(--teal-50);
  --accent-subtle-hover: var(--teal-100);
  --on-accent: var(--slate-0);
  --accent-text: var(--teal-700);
  --success-text: var(--green-600);
  --success-subtle: var(--green-50);
  --danger-text: var(--red-600);
  --danger-subtle: var(--red-50);
  --danger-solid: var(--red-600);
  --warning-text: var(--amber-700);
  --warning-subtle: var(--amber-50);
  --info-text: var(--blue-700);
  --info-subtle: var(--blue-50);
  --notify: #F97316;
  --chart-current: var(--teal-600);
  --chart-previous: var(--slate-400);
  --chart-area: rgba(14,127,166,0.12);
  --chart-grid: var(--slate-100);
  --focus-ring: var(--teal-500);
  --overlay: rgba(17,20,24,0.45);
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);
  --shadow-glow: 0 0 0 1px rgba(14,127,166,0.15), 0 8px 24px rgba(14,127,166,0.15);
}

/* Dark theme */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: var(--charcoal-950);
  --bg-surface: var(--charcoal-850);
  --bg-raised: var(--charcoal-750);
  --bg-sunken: var(--charcoal-800);
  --bg-hover: var(--charcoal-750);
  --bg-selected: var(--charcoal-700);
  --border-subtle: var(--charcoal-800);
  --border-default: var(--charcoal-700);
  --border-strong: var(--charcoal-600);
  --text-primary: var(--charcoal-100);
  --text-secondary: var(--charcoal-300);
  --text-tertiary: var(--charcoal-400);
  --text-inverse: var(--charcoal-950);
  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-pressed: var(--gold-600);
  --accent-subtle: #2A2416;
  --accent-subtle-hover: #352D1A;
  --on-accent: var(--gold-950);
  --accent-text: var(--gold-400);
  --success-text: var(--green-400);
  --success-subtle: var(--green-950);
  --danger-text: var(--red-400);
  --danger-subtle: var(--red-950);
  --danger-solid: #DC3B3B;
  --warning-text: var(--amber-400);
  --warning-subtle: var(--amber-950);
  --info-text: var(--blue-400);
  --info-subtle: var(--blue-950);
  --notify: #FB923C;
  --chart-current: var(--gold-500);
  --chart-previous: var(--charcoal-300);
  --chart-area: rgba(201,168,92,0.18);
  --chart-grid: var(--charcoal-700);
  --focus-ring: var(--gold-400);
  --overlay: rgba(0,0,0,0.65);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(201,168,92,0.25), 0 0 32px rgba(201,168,92,0.22);
}

/* Type styles */
.display-lg { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.display { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.metric-lg { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metric { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; }
.heading { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 400; }
.overline { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }