/* Global color directions, shared by light/dark UI and branded 3D objects. */
:root { --palette-accent: #4655b8; --palette-secondary: #edb98f; --palette-deep: #242b51; --palette-ink: #27283d; --palette-paper: #f7f2e9; }
html[data-palette='lagoon'] { --palette-accent: #246b70; --palette-secondary: #efc39b; --palette-deep: #183e43; --palette-ink: #263b38; --palette-paper: #f4f1e7; }
html[data-palette='sunset'] { --palette-accent: #9b4b32; --palette-secondary: #edbd8e; --palette-deep: #432d36; --palette-ink: #3b2d2c; --palette-paper: #faf1e6; }
html[data-palette='oasis'] { --palette-accent: #5c6539; --palette-secondary: #e4bf87; --palette-deep: #303726; --palette-ink: #32382d; --palette-paper: #f6f2e5; }
:root {
  --paper: var(--palette-paper); --white: #fffcf6; --ink: var(--palette-ink);
  --primary: var(--palette-accent); --clay: var(--primary); --action: var(--palette-accent);
  --action-hover: color-mix(in srgb, var(--palette-accent) 82%, #151a22);
  --night: var(--palette-deep); --header-bg: color-mix(in srgb, var(--paper) 95%, transparent);
  --muted: color-mix(in srgb, var(--ink) 66%, var(--paper));
  --line: color-mix(in srgb, var(--palette-accent) 15%, var(--paper));
  --surface-muted: color-mix(in srgb, var(--palette-accent) 8%, var(--paper));
  --surface-soft: color-mix(in srgb, var(--palette-accent) 10%, var(--white));
  --selected-surface: color-mix(in srgb, var(--palette-accent) 13%, var(--white));
  --summary-surface: color-mix(in srgb, var(--palette-deep) 90%, var(--palette-accent));
  --warm-section: color-mix(in srgb, var(--palette-secondary) 18%, var(--paper));
  --detail-surface: var(--white); --map-surface: var(--surface-muted);
  --graphic-frame: color-mix(in srgb, var(--palette-secondary) 40%, var(--paper));
  --control-border: color-mix(in srgb, var(--palette-accent) 35%, var(--paper));
  --ticket-border: var(--line); --secondary: var(--palette-secondary);
  --board: color-mix(in srgb, var(--palette-accent) 12%, var(--paper));
  --board-line: color-mix(in srgb, var(--palette-accent) 20%, var(--paper));
  --board-ink: color-mix(in srgb, var(--palette-accent) 65%, var(--palette-ink));
  --board-muted: color-mix(in srgb, var(--palette-accent) 45%, #727282);
  --board-name: color-mix(in srgb, var(--palette-accent) 27%, var(--paper));
  --card-sea: color-mix(in srgb, var(--palette-accent) 12%, var(--paper));
  --card-camp: color-mix(in srgb, var(--palette-secondary) 32%, var(--paper));
  --card-oasis: color-mix(in srgb, var(--palette-secondary) 22%, #e9e8d8);
  --night-card: color-mix(in srgb, var(--palette-accent) 20%, var(--night));
  --night-art: color-mix(in srgb, var(--palette-accent) 32%, var(--night));
  --on-night-muted: color-mix(in srgb, var(--palette-accent) 20%, #f6f2e8);
  --closing-surface: color-mix(in srgb, var(--palette-secondary) 70%, var(--palette-paper));
}
html[data-theme='dark'] {
  --paper: color-mix(in srgb, var(--palette-deep) 38%, #101217);
  --white: color-mix(in srgb, var(--palette-deep) 48%, #1b2027);
  --ink: #f4efe7; --primary: color-mix(in srgb, var(--palette-accent) 40%, #fff7eb); --clay: var(--primary);
  --action: color-mix(in srgb, var(--palette-accent) 92%, white);
  --action-hover: color-mix(in srgb, var(--palette-accent) 85%, white);
  --muted: color-mix(in srgb, var(--palette-accent) 20%, #d5d2ce);
  --line: color-mix(in srgb, var(--palette-accent) 25%, #3a3f48);
  --night: color-mix(in srgb, var(--palette-deep) 58%, #080c13);
  --summary-surface: color-mix(in srgb, var(--palette-deep) 90%, var(--palette-accent));
  --header-bg: color-mix(in srgb, var(--paper) 95%, transparent);
  --surface-muted: var(--white); --surface-soft: color-mix(in srgb, var(--palette-accent) 25%, var(--white));
  --selected-surface: var(--surface-soft); --warm-section: var(--paper); --detail-surface: var(--white);
  --map-surface: var(--white); --graphic-frame: var(--surface-soft);
  --control-border: color-mix(in srgb, var(--palette-accent) 38%, #93918b); --ticket-border: var(--line);
  --board: color-mix(in srgb, var(--palette-accent) 24%, var(--white)); --board-line: var(--control-border);
  --board-ink: var(--primary); --board-muted: var(--muted);
  --board-name: color-mix(in srgb, var(--palette-accent) 42%, var(--white));
  --card-sea: var(--surface-soft);
  --card-camp: color-mix(in srgb, var(--palette-secondary) 13%, var(--white));
  --card-oasis: color-mix(in srgb, #89966e 17%, var(--white));
}
.destination-body { color: var(--ink); }
.destination-body > p, .destination-tag, .sea .destination-tag, .olive .destination-tag, .destination-coordinate, .postcard-label, .destination-number { color: var(--board-ink); }
html[data-theme='dark'] .destination-body > p, html[data-theme='dark'] .destination-tag, html[data-theme='dark'] .sea .destination-tag, html[data-theme='dark'] .olive .destination-tag, html[data-theme='dark'] .destination-coordinate, html[data-theme='dark'] .postcard-label, html[data-theme='dark'] .destination-number { color: var(--muted); }
.route-graphic { --primary: var(--action); --clay: var(--action); }
.booking-summary select, .booking-summary .stepper, .booking-summary .stepper input, .summary-row, .summary-travelers { border-color: color-mix(in srgb, var(--palette-accent) 40%, #a3a4ac); }
.summary-heading .eyebrow, .booking-summary .summary-row > span, .total > span, .total > small, .summary-note { color: var(--on-night-muted); }
.booking-summary select option { background: var(--summary-surface); }
.request-button, .request-button:hover { color: var(--palette-deep); }
.request-button:hover { background: color-mix(in srgb, var(--secondary) 80%, white); border-color: transparent; }
.closing h2 em { color: var(--palette-accent); }
.closing .eyebrow, .closing p { color: var(--palette-ink); }
.closing .button-cream { background: var(--palette-accent); border-color: var(--palette-accent); }
.theme-button[aria-pressed='true'] { color: var(--primary); }
html[data-theme='dark'] .hero-world-switch { background: color-mix(in srgb,var(--white) 88%,transparent); border-color: var(--line); }
.day-scene-label { color: var(--palette-ink); }
.palette-widget { position: fixed; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); z-index: 60; }
.palette-toggle { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #ffffff50; border-radius: 17px; background: var(--action); color: #fffaf1; box-shadow: 0 5px 22px #0002; }
.palette-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.palette-toggle:hover { background: var(--action-hover); }
.palette-panel { position: absolute; inset-inline-end: 62px; top: 50%; transform: translateY(-50%); width: 288px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: 21px; border-radius: 25px; box-shadow: 0 20px 65px #0003; }
.palette-panel[hidden] { display: none; }
.palette-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.palette-panel h2 { font-size: 18px; line-height: 1.5; margin: 0; letter-spacing: 0; }
html[dir='rtl'] .palette-panel h2 { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.palette-close { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 10px; font-size: 21px; line-height: 1; }
.palette-panel > p { font-size: 12px; line-height: 1.8; color: var(--muted); margin-block: 9px 15px; }
.palette-panel fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 9px; }
.palette-option { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; padding: 11px; cursor: pointer; }
.palette-option:has(input:checked) { border-color: var(--primary); background: var(--surface-soft); }
.palette-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.palette-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.palette-swatch { display: flex; direction: ltr; flex-shrink: 0; }
.palette-swatch i { width: 18px; height: 32px; background: var(--swatch-a); }
.palette-swatch i:first-child { border-radius: 9px 0 0 9px; }
.palette-swatch i:nth-child(2) { background: var(--swatch-b); }
.palette-swatch i:last-child { background: var(--swatch-c); border-radius: 0 9px 9px 0; }
.palette-option strong { display: block; font-size: 13px; font-weight: 600; }
.palette-option small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.palette-option[data-colors='atlas'] { --swatch-a: #4655b8; --swatch-b: #edb98f; --swatch-c: #f7f2e9; }
.palette-option[data-colors='lagoon'] { --swatch-a: #246b70; --swatch-b: #efc39b; --swatch-c: #f4f1e7; }
.palette-option[data-colors='sunset'] { --swatch-a: #9b4b32; --swatch-b: #edbd8e; --swatch-c: #faf1e6; }
.palette-option[data-colors='oasis'] { --swatch-a: #5c6539; --swatch-b: #e4bf87; --swatch-c: #f6f2e5; }
@media (max-width:600px) {
  .palette-widget { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-end: 14px; transform: none; }
  .palette-toggle { width: 46px; height: 46px; border-radius: 16px; }
  .palette-panel { top: auto; bottom: 58px; inset-inline-end: 0; width: min(288px, calc(100vw - 28px)); transform: none; }
}