:root {
  color-scheme: light;

  --primary-900: #062c38;
  --primary-800: #0b4253;
  --primary-700: #0f5f76;
  --primary-600: #137a95;
  --primary-500: #1b95b5;

  --secondary-700: #0b7da9;
  --secondary-600: #1195c7;
  --secondary-500: #1fb4e7;
  --secondary-400: #66d3ff;

  --accent-700: #2150d8;
  --accent-600: #2d68f3;
  --accent-500: #4c87ff;
  --accent-400: #76a8ff;

  --emerald-600: #0f9f78;
  --emerald-500: #16b58d;
  --gold-500: #d6a64b;
  --gold-400: #edd08f;

  --neutral-0: #ffffff;
  --neutral-25: #fbfdff;
  --neutral-50: #f7fafc;
  --neutral-75: #f4f8fb;
  --neutral-100: #edf3f8;
  --neutral-200: #d8e4ee;
  --neutral-300: #bfd0df;
  --neutral-400: #88a0b6;
  --neutral-500: #60788f;
  --neutral-600: #466077;
  --neutral-700: #2b4358;
  --neutral-800: #16273d;
  --neutral-900: #0b1726;
  --neutral-950: #08111f;

  --status-success: #15b98a;
  --status-warning: #f2a93b;
  --status-danger: #ef5f7a;
  --status-info: #49a6ff;

  --brand-teal: var(--primary-700);
  --brand-teal-dark: var(--primary-900);
  --brand-teal-light: var(--secondary-400);
  --brand-teal-muted: color-mix(in srgb, var(--primary-700) 14%, transparent);

  --brand-brown: var(--accent-700);
  --brand-brown-dark: #1b3ea5;
  --brand-brown-light: var(--accent-500);
  --brand-brown-muted: color-mix(in srgb, var(--accent-600) 12%, transparent);

  --bg: var(--neutral-50);
  --bg-secondary: var(--neutral-75);
  --bg-muted: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  --bg-elevated: rgba(255, 255, 255, 0.8);
  --bg-elevated-card: #ffffff;
  --bg-popover: rgba(255, 255, 255, 0.92);
  --bg-modal: rgba(255, 255, 255, 0.96);
  --bg-nav: rgba(247, 250, 252, 0.78);
  --card-bg: rgba(255, 255, 255, 0.78);
  --fg: #0d1b2a;
  --fg-muted: #476179;
  --fg-subtle: #6d8397;
  --border: rgba(43, 67, 88, 0.12);
  --border-soft: rgba(43, 67, 88, 0.08);
  --border-medium: rgba(43, 67, 88, 0.16);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(152, 177, 197, 0.24);
  --grid-line: rgba(21, 53, 86, 0.055);
  --icon-brown: var(--accent-600);
  --icon-teal: var(--primary-700);

  --accent-orange: var(--gold-500);
  --accent-orange-dark: #b98a35;
  --accent-orange-light: #f6d99d;
  --accent-orange-muted: color-mix(in srgb, var(--gold-500) 16%, transparent);
  --accent-blue: var(--accent-600);
  --accent-blue-muted: color-mix(in srgb, var(--accent-600) 15%, transparent);
  --accent-green: var(--emerald-500);
  --accent-green-muted: color-mix(in srgb, var(--emerald-500) 14%, transparent);
  --accent-amber: var(--gold-500);
  --accent-amber-muted: color-mix(in srgb, var(--gold-500) 14%, transparent);
  --accent-red: var(--status-danger);
  --accent-red-muted: color-mix(in srgb, var(--status-danger) 14%, transparent);
  --accent-cyan: var(--secondary-500);
  --accent-cyan-muted: color-mix(in srgb, var(--secondary-500) 14%, transparent);
  --accent-purple: #6a6afc;
  --accent-purple-muted: color-mix(in srgb, #6a6afc 14%, transparent);

  --gradient-teal: linear-gradient(135deg, #0d4558 0%, #147493 48%, #2d68f3 100%);
  --gradient-accent: linear-gradient(135deg, #147493 0%, #2d68f3 100%);
  --gradient-orange: linear-gradient(135deg, #b98a35 0%, #d6a64b 100%);
  --gradient-hero:
    radial-gradient(circle at 18% 18%, rgba(17, 149, 199, 0.16), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(45, 104, 243, 0.14), transparent 32%),
    radial-gradient(circle at 50% 75%, rgba(21, 185, 138, 0.08), transparent 34%),
    linear-gradient(180deg, #f7fafc 0%, #f4f8fb 55%, #edf3f8 100%);

  --surface-primary: rgba(255, 255, 255, 0.82);
  --surface-secondary: rgba(247, 250, 252, 0.78);
  --surface-tertiary: rgba(237, 243, 248, 0.78);

  --button-primary-bg: var(--gradient-teal);
  --button-primary-fg: #ffffff;
  --button-secondary-bg: rgba(255, 255, 255, 0.68);
  --button-secondary-fg: var(--fg);
  --button-secondary-border: rgba(43, 67, 88, 0.12);
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: var(--neutral-950);
  --bg-secondary: #0b1726;
  --bg-muted: linear-gradient(180deg, #0b1726 0%, #111c2e 100%);
  --bg-elevated: rgba(18, 30, 48, 0.72);
  --bg-elevated-card: #131f31;
  --bg-popover: rgba(19, 31, 49, 0.94);
  --bg-modal: rgba(17, 28, 46, 0.98);
  --bg-nav: rgba(8, 17, 31, 0.7);
  --card-bg: rgba(19, 31, 49, 0.76);
  --fg: #edf6ff;
  --fg-muted: #a5b8cb;
  --fg-subtle: #7f95aa;
  --border: rgba(137, 170, 201, 0.14);
  --border-soft: rgba(137, 170, 201, 0.1);
  --border-medium: rgba(137, 170, 201, 0.18);
  --glass: rgba(11, 23, 38, 0.6);
  --glass-border: rgba(111, 149, 184, 0.16);
  --grid-line: rgba(164, 198, 232, 0.06);
  --icon-brown: #89a8ff;
  --icon-teal: #69d5ff;

  --brand-teal: #25b8cf;
  --brand-teal-dark: #0b4253;
  --brand-teal-light: #87e4ff;
  --brand-teal-muted: rgba(37, 184, 207, 0.13);

  --brand-brown: #4c87ff;
  --brand-brown-dark: #2150d8;
  --brand-brown-light: #89a8ff;
  --brand-brown-muted: rgba(76, 135, 255, 0.14);

  --accent-orange: #d6a64b;
  --accent-orange-dark: #b98a35;
  --accent-orange-light: #f1d28d;
  --accent-orange-muted: rgba(214, 166, 75, 0.15);
  --accent-blue: #4c87ff;
  --accent-blue-muted: rgba(76, 135, 255, 0.16);
  --accent-green: #29c59b;
  --accent-green-muted: rgba(41, 197, 155, 0.16);
  --accent-amber: #f0b24a;
  --accent-amber-muted: rgba(240, 178, 74, 0.16);
  --accent-red: #ff6f88;
  --accent-red-muted: rgba(255, 111, 136, 0.14);
  --accent-cyan: #4fd4ff;
  --accent-cyan-muted: rgba(79, 212, 255, 0.14);
  --accent-purple: #8f86ff;
  --accent-purple-muted: rgba(143, 134, 255, 0.14);

  --gradient-teal: linear-gradient(135deg, #0e596d 0%, #1797b8 45%, #3e7dff 100%);
  --gradient-accent: linear-gradient(135deg, #1797b8 0%, #3e7dff 100%);
  --gradient-orange: linear-gradient(135deg, #b88a36 0%, #e2bb65 100%);
  --gradient-hero:
    radial-gradient(circle at 16% 18%, rgba(37, 184, 207, 0.18), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(76, 135, 255, 0.17), transparent 32%),
    radial-gradient(circle at 50% 74%, rgba(41, 197, 155, 0.08), transparent 34%),
    linear-gradient(180deg, #08111f 0%, #0b1726 58%, #111c2e 100%);

  --surface-primary: rgba(19, 31, 49, 0.82);
  --surface-secondary: rgba(14, 25, 41, 0.75);
  --surface-tertiary: rgba(12, 24, 39, 0.88);
  --button-secondary-bg: rgba(19, 31, 49, 0.62);
  --button-secondary-fg: var(--fg);
  --button-secondary-border: rgba(137, 170, 201, 0.14);
}