/* CruiseHQ — Theme System (Luna Digital planner palettes)
   Five themes via data-theme on <body>. Theme ids are buyer-saved settings: never rename them.
     blush   = Blush & Sage (default)     rainbow = Rainbow Pastel     neutral = Neutral
     dark    = Dark                        ocean   = Ocean Luxe (CruiseHQ's own premium theme)
   Token names follow the planner-theme-palettes standard. The legacy names the components use
   (--bg-card, --accent-text, …) are aliased onto these tokens at the bottom of this file.
   CruiseHQ additions per theme:
     --progress-edge  deep edge on pale progress fills so the filled amount reads at >=3:1
     --ring-stroke    progress-ring arc (a thin arc can't carry an edge, so it's a deep shade)
     --scene-*        colours for the dashboard's illustrated header (sky, sun, sea, ship) */

:root, [data-theme="blush"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF7F5;
  --nav-bg: #EFD6D2; --nav-text: #4A2F33; --nav-icon: #9A5E66; --nav-hover-bg: #E9CAC5; --nav-active-bg: #FAF7F5; --nav-active-text: #3B2427;
  --text: #3A2E30; --text-muted: #73666A; --heading: #3A2E30; --link: #5E7A62;
  --border: #EDE3E0; --border-accent: #E1C1C1; --divider: #F2ECEA;
  --btn-primary-bg: #AFC2B0; --btn-primary-text: #22362A; --btn-primary-hover: #9DB49F;
  --btn-secondary-bg: #EFD6D2; --btn-secondary-text: #5A3439; --btn-secondary-hover: #E6C6C1;
  --btn-ghost-text: #5E7A62; --btn-ghost-border: #AFC2B0;
  --accent-1: #E1C1C1; --accent-1-deep: #A86B72; --accent-2: #AFC2B0; --accent-2-deep: #5E7A62;
  --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
  --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
  --chart-1: #E1C1C1; --chart-2: #AFC2B0; --chart-3: #C9979D; --chart-4: #84A088; --chart-5: #D9AFAA; --chart-6: #D4BFA6;
  --chart-edge: #B88A90; --chart-track: #F3ECEA; --progress-track: #F3E8E6; --progress-fill: #AFC2B0;
  --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
  --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
  --callout-bg: #F7E6E3; --callout-border: #E1C1C1; --focus-ring: #A86B72; --brand-stripe: none;
  --progress-edge: #5E7A62; --ring-stroke: #5E7A62;
  --accent-ink: #4A634E;   /* CruiseHQ: sage accent text on the pink panels (ghost-text is 3.9:1 there) */
  --scene-sky-top: #F4DDD8; --scene-sky-bottom: #FBF3F1; --scene-sun: #EBC7C2;
  --scene-sea-1: #DCE6DC; --scene-sea-2: #C2D3C3; --scene-sea-3: #9DB49F;
  --scene-hull: #4A2F33; --scene-ship: #FFFFFF; --scene-accent: #A86B72; --scene-bird: #9A5E66;
  --shadow-sm: 0 1px 2px rgba(74,47,51,0.05); --shadow-md: 0 4px 14px rgba(74,47,51,0.07); --shadow-lg: 0 10px 28px rgba(74,47,51,0.10);
}

[data-theme="rainbow"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FBFAF8;
  --nav-bg: #EFEDF5; --nav-text: #36305E; --nav-icon: #6B62A8; --nav-hover-bg: #E6E3F0; --nav-active-bg: #FFFFFF; --nav-active-text: #2B2552;
  --text: #2F2D3A; --text-muted: #696676; --heading: #2F2D3A; --link: #3F6A9C;
  --border: #ECEAF0; --border-accent: #D8D4F2; --divider: #F1EFF3;
  --btn-primary-bg: #C9DDF2; --btn-primary-text: #1F3A5C; --btn-primary-hover: #B5CFEC;
  --btn-secondary-bg: #F6D1C1; --btn-secondary-text: #6E3520; --btn-secondary-hover: #F1C2AE;
  --btn-ghost-text: #4F4793; --btn-ghost-border: #D8D4F2;
  --accent-1: #D8D4F2; --accent-1-deep: #6B62A8; --accent-2: #C9DDF2; --accent-2-deep: #3F6A9C;
  --chip-1-bg: #FBE5DB; --chip-1-text: #7E3B22; --chip-2-bg: #F8E7CF; --chip-2-text: #77501C;
  --chip-3-bg: #F7F0CF; --chip-3-text: #655619; --chip-4-bg: #E0EEE5; --chip-4-text: #2F5C40;
  --chip-5-bg: #E0EBF8; --chip-5-text: #264E7C; --chip-6-bg: #E8E5F8; --chip-6-text: #463E86;
  --chart-1: #F2B9A3; --chart-2: #EDC690; --chart-3: #E6D488; --chart-4: #A8D0B6; --chart-5: #A6C6E8; --chart-6: #BCB5EA;
  --chart-edge: #8F87C4; --chart-track: #F1EFF3; --progress-track: #EFEDF6;
  --progress-fill: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --success-bg: #E0EEE5; --success-text: #2F5C40; --warning-bg: #F8E7CF; --warning-text: #77501C;
  --danger-bg: #FBE0D6; --danger-text: #8A3A22; --info-bg: #E0EBF8; --info-text: #264E7C;
  --callout-bg: #F1EFFA; --callout-border: #D8D4F2; --focus-ring: #6B62A8;
  --brand-stripe: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --progress-edge: #6B62A8; --ring-stroke: #6B62A8;
  --scene-sky-top: #E8E5F8; --scene-sky-bottom: #FBE9E0; --scene-sun: #F6D1C1;
  --scene-sea-1: #E0EBF8; --scene-sea-2: #C9DDF2; --scene-sea-3: #A6C6E8;
  --scene-hull: #36305E; --scene-ship: #FFFFFF; --scene-accent: #F2B9A3; --scene-bird: #6B62A8;
  --shadow-sm: 0 1px 2px rgba(54,48,94,0.05); --shadow-md: 0 4px 14px rgba(54,48,94,0.07); --shadow-lg: 0 10px 28px rgba(54,48,94,0.10);
}

[data-theme="neutral"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF8F4;
  --nav-bg: #C5D9D8; --nav-text: #243B3A; --nav-icon: #4E6C6B; --nav-hover-bg: #B6CECD; --nav-active-bg: #FAF8F4; --nav-active-text: #1F3332;
  --text: #2D3133; --text-muted: #676D70; --heading: #2D3133; --link: #555F80;
  --border: #ECE9E5; --border-accent: #C5D9D8; --divider: #F1EFEB;
  --btn-primary-bg: #666F8F; --btn-primary-text: #FFFFFF; --btn-primary-hover: #596282;
  --btn-secondary-bg: #C5D9D8; --btn-secondary-text: #243B3A; --btn-secondary-hover: #B6CECD;
  --btn-ghost-text: #555F80; --btn-ghost-border: #AEB6D2;
  --accent-1: #A2B6B5; --accent-1-deep: #4E6C6B; --accent-2: #AEB6D2; --accent-2-deep: #555F80;
  --chip-1-bg: #E3EDEC; --chip-1-text: #2F4D4C; --chip-2-bg: #E6E9F3; --chip-2-text: #3E4768;
  --chip-3-bg: #EFECE7; --chip-3-text: #5A544B; --chip-4-bg: #DCE3E2; --chip-4-text: #34494A;
  --chart-1: #A2B6B5; --chart-2: #7D86A4; --chart-3: #C5D9D8; --chart-4: #AEB6D2; --chart-5: #D3CABE; --chart-6: #5F7A79;
  --chart-edge: #6E8786; --chart-track: #F1EFEB; --progress-track: #ECE9E5; --progress-fill: #A2B6B5;
  --success-bg: #E3EDEC; --success-text: #2F4D4C; --warning-bg: #F1E8DA; --warning-text: #6B5126;
  --danger-bg: #F2E1DF; --danger-text: #83423E; --info-bg: #E6E9F3; --info-text: #3E4768;
  --callout-bg: #EEF4F3; --callout-border: #C5D9D8; --focus-ring: #7D86A4; --brand-stripe: none;
  --progress-edge: #4E6C6B; --ring-stroke: #4E6C6B;
  --scene-sky-top: #DCE9E8; --scene-sky-bottom: #F7F5F0; --scene-sun: #E4DACB;
  --scene-sea-1: #DCE6E5; --scene-sea-2: #B6CECD; --scene-sea-3: #7F9A99;
  --scene-hull: #2D3133; --scene-ship: #FFFFFF; --scene-accent: #666F8F; --scene-bird: #4E6C6B;
  --shadow-sm: 0 1px 2px rgba(45,49,51,0.05); --shadow-md: 0 4px 14px rgba(45,49,51,0.07); --shadow-lg: 0 10px 28px rgba(45,49,51,0.10);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1E23; --surface: #25272E; --surface-alt: #2B2D35;
  --nav-bg: #2C2F39; --nav-text: #E3E1EA; --nav-icon: #A9B0D6; --nav-hover-bg: #353947; --nav-active-bg: #3B4052; --nav-active-text: #F3F1F6;
  --text: #E8E6E3; --text-muted: #A9A7B0; --heading: #F1EFEC; --link: #A9C4E6;
  --border: #363944; --border-accent: #4A4F64; --divider: #30333C;
  --btn-primary-bg: #A9B0D6; --btn-primary-text: #1D1E2B; --btn-primary-hover: #BBC1E0;
  --btn-secondary-bg: #3A3E4D; --btn-secondary-text: #E8E6EF; --btn-secondary-hover: #454A5C;
  --btn-ghost-text: #C2C8E6; --btn-ghost-border: #555B75;
  --accent-1: #A9B0D6; --accent-1-deep: #C2C8E6; --accent-2: #9DB8A0; --accent-2-deep: #B6CDB8;
  --chip-1-bg: #3A3550; --chip-1-text: #D6D1F2; --chip-2-bg: #2F4136; --chip-2-text: #C8E0CC;
  --chip-3-bg: #4A3437; --chip-3-text: #F0CFCF; --chip-4-bg: #2E3C4E; --chip-4-text: #C9DCF2;
  --chart-1: #A9B0D6; --chart-2: #9DB8A0; --chart-3: #E3B5B5; --chart-4: #9CC3E6; --chart-5: #E6D29A; --chart-6: #E8B49E;
  --chart-edge: #1D1E23; --chart-track: #30333C; --progress-track: #30333C; --progress-fill: #9DB8A0;
  --success-bg: #2F4136; --success-text: #C8E0CC; --warning-bg: #463D2B; --warning-text: #EBD9A9;
  --danger-bg: #4A3437; --danger-text: #F0C4C4; --info-bg: #2E3C4E; --info-text: #C9DCF2;
  --callout-bg: #2B2D3A; --callout-border: #4A4F64; --focus-ring: #C2C8E6; --brand-stripe: none;
  --progress-edge: #9DB8A0; --ring-stroke: #9DB8A0;
  --scene-sky-top: #2B2D3A; --scene-sky-bottom: #33364A; --scene-sun: #E6D29A;
  --scene-sea-1: #353947; --scene-sea-2: #3B4052; --scene-sea-3: #4A4F64;
  --scene-hull: #A9B0D6; --scene-ship: #E3E1EA; --scene-accent: #E6D29A; --scene-bird: #A9B0D6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow-md: 0 4px 14px rgba(0,0,0,0.35); --shadow-lg: 0 10px 28px rgba(0,0,0,0.45);
}

/* Ocean Luxe — CruiseHQ's own theme, rebuilt on the same tokens (recipe: "new theme from base
   colours", base = deep navy + champagne gold + sea glass). Signature: navy with gold actions. */
[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #0D1420; --surface: #172236; --surface-alt: #1D2A42;
  --nav-bg: #121C2E; --nav-text: #E8E2D2; --nav-icon: #D9BD82; --nav-hover-bg: #1B2740; --nav-active-bg: #22304B; --nav-active-text: #F4EEDD;
  --text: #ECE8DE; --text-muted: #A9B2C3; --heading: #F4EEDD; --link: #E3C98F;
  --border: #2A3852; --border-accent: #8A7448; --divider: #223049;
  --btn-primary-bg: #C9A96A; --btn-primary-text: #241A08; --btn-primary-hover: #D9BD82;
  --btn-secondary-bg: #22334A; --btn-secondary-text: #CFE0EA; --btn-secondary-hover: #2C4060;
  --btn-ghost-text: #E3C98F; --btn-ghost-border: #6A7A98;
  --accent-1: #C9A96A; --accent-1-deep: #E3C98F; --accent-2: #7FB5A8; --accent-2-deep: #A9D4C8;
  --chip-1-bg: #3A3220; --chip-1-text: #EBD7A8; --chip-2-bg: #1F3A39; --chip-2-text: #BFE1D8;
  --chip-3-bg: #26324A; --chip-3-text: #CCD7EA; --chip-4-bg: #402A2A; --chip-4-text: #F0C9BF;
  --chart-1: #C9A96A; --chart-2: #7FB5A8; --chart-3: #8FA8CC; --chart-4: #D98E7A; --chart-5: #E3D3AC; --chart-6: #A08FC0;
  --chart-edge: #0D1420; --chart-track: #223049; --progress-track: #223049; --progress-fill: #C9A96A;
  --success-bg: #1F3A39; --success-text: #BFE1D8; --warning-bg: #3A3220; --warning-text: #EBD7A8;
  --danger-bg: #402A2A; --danger-text: #F2C3B6; --info-bg: #26324A; --info-text: #CCD7EA;
  --callout-bg: #1B2740; --callout-border: #8A7448; --focus-ring: #E3C98F; --brand-stripe: none;
  --progress-edge: #E3C98F; --ring-stroke: #C9A96A;
  --scene-sky-top: #0F1A30; --scene-sky-bottom: #24365A; --scene-sun: #E3C98F;
  --scene-sea-1: #1C2C4A; --scene-sea-2: #172438; --scene-sea-3: #101A2C;
  --scene-hull: #C9A96A; --scene-ship: #ECE8DE; --scene-accent: #E3C98F; --scene-bird: #8FA8CC;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 14px rgba(0,0,0,0.45); --shadow-lg: 0 10px 28px rgba(0,0,0,0.55);
}

/* ---- Legacy names the components already use, mapped onto the tokens above ---- */
:root, [data-theme] {
  --bg-main: var(--bg);
  --bg-secondary: var(--surface-alt);
  --bg-card: var(--surface);
  --bg-card-elevated: var(--surface-alt);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--btn-primary-bg);
  --accent-hover: var(--accent-1-deep);          /* icons, numbers, rings: >=3:1 */
  --accent-light-bg: var(--callout-bg);
  --accent-text: var(--accent-ink, var(--btn-ghost-text));   /* small accent text and links: >=4.5:1 */
  --on-accent: var(--btn-primary-text);
  --on-accent-hover: var(--btn-primary-text);
  --accent-secondary: var(--btn-secondary-hover);
  --accent-sec-light: var(--btn-secondary-bg);
  --accent-sec-text: var(--btn-secondary-text);
  --on-accent-sec: var(--btn-secondary-text);
  --success: var(--success-text);
  --warning: var(--warning-text);
  --error: var(--danger-text);
  --info: var(--info-text);
  --hero-number: var(--accent-1-deep);
}

/* Leaflet tile theming for the dark-surface themes */
[data-theme="dark"] .leaflet-tile,
[data-theme="ocean"] .leaflet-tile { filter: brightness(0.7) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); }

/* Global background */
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
