/* Theme tokens: add new palettes by duplicating a block below and updating values.
   Default theme = ocean (blues); alternate = sunset (warm). */

/* Base tokens (fallback) */
:root {
  --deep-twilight: #03045e;
  --french-blue: #023e8a;
  --bright-teal-blue: #0077b6;
  --blue-green: #0096c7;
  --turquoise-surf: #00b4d8;
  --sky-aqua: #48cae4;
  --frosted-blue: #90e0ef;
  --frosted-blue-2: #ade8f4;
  --light-cyan: #caf0f8;
  --gradient-main: linear-gradient(135deg, var(--deep-twilight), var(--blue-green));
  --body-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --display-font: 'Cormorant Garamond', 'Times New Roman', serif;
  --primary: var(--french-blue);
  --primary-strong: var(--deep-twilight);
  --bg-body: #f7fbfd;
  --text-main: #0a1f33;
  --text-muted: #4b6072;
  --surface: #ffffff;
  --surface-soft: #e5f7ff;
  --border: rgba(0, 118, 182, 0.12);
  --card-shadow: rgba(0, 118, 182, 0.08);
  --soft-gradient: linear-gradient(180deg, rgba(144, 224, 239, 0.14), rgba(202, 240, 248, 0.42));
  --nav-bg: rgba(3, 4, 94, 0.8);
  --nav-bg-mobile: rgba(3, 4, 94, 0.92);
  --nav-text: #d9ecf7;
  --nav-border: rgba(255, 255, 255, 0.08);
  --dropdown-bg: rgba(3, 4, 94, 0.98);
  --dropdown-border: rgba(255, 255, 255, 0.12);
  --dropdown-shadow: rgba(0, 0, 0, 0.22);
  --dropdown-item-text: rgba(255, 255, 255, 0.88);
  --dropdown-item-hover-bg: rgba(255, 255, 255, 0.12);
  --dropdown-item-hover-text: #fff;
  --dropdown-divider: rgba(255, 255, 255, 0.14);
  --btn-surface-bg: rgba(255, 255, 255, 0.14);
  --btn-surface-border: rgba(255, 255, 255, 0.24);
  --hero-spot-1: rgba(72, 202, 228, 0.2);
  --hero-spot-2: rgba(0, 180, 216, 0.28);
  --hero-overlay-1: rgba(3, 4, 94, 0.88);
  --hero-overlay-2: rgba(0, 118, 182, 0.8);
  --banner-bg: #7c1f2b;
}

/* Ocean (current blues) */
:root[data-theme="ocean"] {
  --deep-twilight: #03045e;
  --french-blue: #023e8a;
  --bright-teal-blue: #0077b6;
  --blue-green: #0096c7;
  --turquoise-surf: #00b4d8;
  --sky-aqua: #48cae4;
  --frosted-blue: #90e0ef;
  --frosted-blue-2: #ade8f4;
  --light-cyan: #caf0f8;
  --gradient-main: linear-gradient(135deg, var(--deep-twilight), var(--blue-green));
  --primary: var(--french-blue);
  --primary-strong: var(--bright-teal-blue);
  --bg-body: #f7fbfd;
  --text-main: #0a1f33;
  --text-muted: #4b6072;
  --surface: #ffffff;
  --surface-soft: #e5f7ff;
  --border: rgba(0, 118, 182, 0.12);
  --card-shadow: rgba(0, 118, 182, 0.08);
  --soft-gradient: linear-gradient(180deg, rgba(144, 224, 239, 0.14), rgba(202, 240, 248, 0.42));
  --nav-bg: rgba(3, 4, 94, 0.8);
  --nav-bg-mobile: rgba(3, 4, 94, 0.92);
  --nav-text: #d9ecf7;
  --nav-border: rgba(255, 255, 255, 0.08);
  --dropdown-bg: rgba(3, 4, 94, 0.98);
  --dropdown-border: rgba(255, 255, 255, 0.12);
  --dropdown-shadow: rgba(0, 0, 0, 0.22);
  --dropdown-item-text: rgba(255, 255, 255, 0.88);
  --dropdown-item-hover-bg: rgba(255, 255, 255, 0.12);
  --dropdown-item-hover-text: #fff;
  --dropdown-divider: rgba(255, 255, 255, 0.14);
  --btn-surface-bg: rgba(255, 255, 255, 0.14);
  --btn-surface-border: rgba(255, 255, 255, 0.24);
  --hero-spot-1: rgba(72, 202, 228, 0.2);
  --hero-spot-2: rgba(0, 180, 216, 0.28);
  --hero-overlay-1: rgba(3, 4, 94, 0.88);
  --hero-overlay-2: rgba(0, 118, 182, 0.8);
  --banner-bg: #7c1f2b;
}

/* Sunset (warm alt palette) */
:root[data-theme="sunset"] {
  --deep-twilight: #3d0f2f;
  --french-blue: #6a1b9a;
  --bright-teal-blue: #c2185b;
  --blue-green: #d84315;
  --turquoise-surf: #f06292;
  --sky-aqua: #ffb74d;
  --frosted-blue: #ffe0b2;
  --frosted-blue-2: #ffe9cf;
  --light-cyan: #fff3e0;
  --gradient-main: linear-gradient(135deg, #3d0f2f, #d84315);
  --primary: #c2185b;
  --primary-strong: #8c0f41;
  --bg-body: #fef6f3;
  --text-main: #2b0f1f;
  --text-muted: #5a3b44;
  --surface: #fffaf7;
  --surface-soft: #ffe9cf;
  --border: rgba(210, 89, 60, 0.18);
  --card-shadow: rgba(210, 89, 60, 0.14);
  --soft-gradient: linear-gradient(180deg, rgba(255, 233, 207, 0.5), rgba(255, 247, 244, 0.9));
  --nav-bg: rgba(61, 15, 47, 0.9);
  --nav-bg-mobile: rgba(61, 15, 47, 0.95);
  --nav-text: #ffe9cf;
  --nav-border: rgba(255, 255, 255, 0.12);
  --dropdown-bg: rgba(61, 15, 47, 0.97);
  --dropdown-border: rgba(255, 233, 207, 0.22);
  --dropdown-shadow: rgba(0, 0, 0, 0.28);
  --dropdown-item-text: rgba(255, 233, 207, 0.92);
  --dropdown-item-hover-bg: rgba(255, 233, 207, 0.14);
  --dropdown-item-hover-text: #fff;
  --dropdown-divider: rgba(255, 233, 207, 0.2);
  --btn-surface-bg: rgba(255, 255, 255, 0.16);
  --btn-surface-border: rgba(255, 255, 255, 0.26);
  --hero-spot-1: rgba(255, 183, 77, 0.18);
  --hero-spot-2: rgba(240, 98, 146, 0.22);
  --hero-overlay-1: rgba(61, 15, 47, 0.9);
  --hero-overlay-2: rgba(216, 67, 21, 0.8);
  --banner-bg: #6d1b3b;
}

/* Ember (deep reds/oranges) */
:root[data-theme="ember"] {
  --ink-black: #03071e;
  --night-bordeaux: #370617;
  --black-cherry: #6a040f;
  --oxblood: #9d0208;
  --brick-ember: #d00000;
  --red-ochre: #dc2f02;
  --cayenne-red: #e85d04;
  --deep-saffron: #f48c06;
  --orange: #faa307;
  --amber-flame: #ffba08;
  --deep-twilight: var(--night-bordeaux);
  --french-blue: var(--black-cherry);
  --bright-teal-blue: var(--red-ochre);
  --blue-green: var(--brick-ember);
  --turquoise-surf: var(--orange);
  --sky-aqua: var(--deep-saffron);
  --frosted-blue: #ffe3c2;
  --frosted-blue-2: #ffeccf;
  --light-cyan: #fff5e6;
  --gradient-main: linear-gradient(135deg, var(--night-bordeaux), var(--brick-ember));
  --primary: var(--brick-ember);
  --primary-strong: var(--oxblood);
  --bg-body: #fff7f0;
  --text-main: #260c10;
  --text-muted: #5b2c2f;
  --surface: #fffaf5;
  --surface-soft: #fff0e0;
  --border: rgba(208, 0, 0, 0.16);
  --card-shadow: rgba(208, 0, 0, 0.12);
  --soft-gradient: linear-gradient(180deg, rgba(255, 240, 224, 0.6), rgba(255, 250, 245, 0.95));
  --nav-bg: rgba(55, 6, 23, 0.9);
  --nav-bg-mobile: rgba(55, 6, 23, 0.95);
  --nav-text: #ffeccf;
  --nav-border: rgba(255, 255, 255, 0.14);
  --dropdown-bg: rgba(55, 6, 23, 0.97);
  --dropdown-border: rgba(255, 236, 207, 0.22);
  --dropdown-shadow: rgba(0, 0, 0, 0.28);
  --dropdown-item-text: rgba(255, 236, 207, 0.92);
  --dropdown-item-hover-bg: rgba(255, 236, 207, 0.14);
  --dropdown-item-hover-text: #fff;
  --dropdown-divider: rgba(255, 236, 207, 0.2);
  --btn-surface-bg: rgba(255, 255, 255, 0.16);
  --btn-surface-border: rgba(255, 255, 255, 0.26);
  --hero-spot-1: rgba(244, 140, 6, 0.18);
  --hero-spot-2: rgba(208, 0, 0, 0.2);
  --hero-overlay-1: rgba(55, 6, 23, 0.85);
  --hero-overlay-2: rgba(208, 0, 0, 0.7);
  --banner-bg: var(--oxblood);
}