/*
 * VALDIER V3 — Site Appearance: the dark interface of the pages (header, hero,
 * sections, footer, menu, editorial and booking pages).
 *
 * How it works. The page's stylesheets read semantic tokens with the approved
 * light value as fallback: `color: var(--vs-ink, #000)`. Light defines none of
 * the --vs-* tokens, so it renders exactly the approved values. Dark defines
 * them all, below, together with the dark values of the shared --v-section-*
 * and --v-footer-* tokens (css/valdier-brand.css). The design-system tokens
 * (--v-ink, --v-surface…) have their own dark values in the booking island's
 * stylesheet (design-system/src/styles/tokens.css); the brand colour's dark
 * variants are printed by the server (inc/palettes.php).
 *
 * <html data-appearance> is printed by the server: "dark" → always; "auto" →
 * when the device prefers dark (no script, no flash). A future visitor toggle
 * only has to set the attribute. The two token blocks are the same list: keep
 * them identical (tools/qa/palettes.mjs checks it).
 *
 * Loaded last, on every page. Nothing here changes a size, a space or a font.
 */

/* ---- Logos: one image per appearance (inc/template-tags.php) --------------- */
/* The footer and the menu panel are light on Light (the dark silhouette or the
   logo for light backgrounds) and dark on Dark (the site logo itself, as on
   the navigation bar). The hidden image is lazy: never downloaded. */
.footer_logo-image.is-for-dark {
  display: var(--vs-show-dark, none);
  filter: none;
}

.vo__brand .footer_logo-image.is-for-dark {
  display: var(--vs-show-dark-block, none);
}

:root[data-appearance='dark'] .footer_logo-image:not(.is-for-dark) {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root[data-appearance='auto'] .footer_logo-image:not(.is-for-dark) {
    display: none;
  }
}

/* ---- Dashed dividers (inline SVG, stroke="#E3E3E3" in the templates) -------- */
.divider path,
.divider-vertical path {
  stroke: var(--vs-dash, #e3e3e3);
}

/* ---- Dark tokens -------------------------------------------------------------- */
:root[data-appearance='dark'] {
  --vs-page: #101214;
  --vs-surface: #1b1e21;
  --vs-card: #22262a;
  --vs-fill: #2a2f34;
  --vs-fill-hover: #31363c;
  --vs-sunken: #1b1e21;
  --vs-panel: #1b1e21;
  --vs-ink: #f5f5f3;
  --vs-ink-hover: #ffffff;
  --vs-on-ink: #101214;
  --vs-text: #d9dcdf;
  --vs-muted: #aeb4ba;
  --vs-faint: #9aa1a8;
  --vs-placeholder: #959ca3;
  --vs-border: #34393e;
  --vs-dash: #3a3f45;
  --vs-ring: rgba(255, 255, 255, 0.08);
  --vs-ring-strong: rgba(255, 255, 255, 0.14);
  --vs-divider: rgba(255, 255, 255, 0.08);
  --vs-halo: rgba(255, 255, 255, 0.08);
  --vs-dot: #8b9198;
  --vs-btn: #2f3439;
  --vs-btn-hover: #3a4046;
  --vs-nav: #17191c;
  --vs-nav-ink: #f5f5f3;
  --vs-pill: #2a2f34;
  --vs-pill-ink: #f5f5f3;
  --vs-veil: rgba(16, 18, 20, 0.9);
  --vs-show-dark: inline-block;
  --vs-show-dark-block: block;
  --v-border: #34393e;
  --v-section-white: #101214;
  --v-section-ivory: #15181b;
  --v-section-stone: #1b1e21;
  --v-section-prefooter: #15181b;
  --v-section-footer: #1d2024;
  --v-footer-text-muted: #a3a9af;
  --v-footer-link: #c3c8cd;
  --v-footer-line: #34393e;
  --v-footer-hover: #2a2f34;
  --v-footer-pattern-opacity: 0.18;
}

@media (prefers-color-scheme: dark) {
  :root[data-appearance='auto'] {
    --vs-page: #101214;
    --vs-surface: #1b1e21;
    --vs-card: #22262a;
    --vs-fill: #2a2f34;
    --vs-fill-hover: #31363c;
    --vs-sunken: #1b1e21;
    --vs-panel: #1b1e21;
    --vs-ink: #f5f5f3;
    --vs-ink-hover: #ffffff;
    --vs-on-ink: #101214;
    --vs-text: #d9dcdf;
    --vs-muted: #aeb4ba;
    --vs-faint: #9aa1a8;
    --vs-placeholder: #959ca3;
    --vs-border: #34393e;
    --vs-dash: #3a3f45;
    --vs-ring: rgba(255, 255, 255, 0.08);
    --vs-ring-strong: rgba(255, 255, 255, 0.14);
    --vs-divider: rgba(255, 255, 255, 0.08);
    --vs-halo: rgba(255, 255, 255, 0.08);
    --vs-dot: #8b9198;
    --vs-btn: #2f3439;
    --vs-btn-hover: #3a4046;
    --vs-nav: #17191c;
    --vs-nav-ink: #f5f5f3;
    --vs-pill: #2a2f34;
    --vs-pill-ink: #f5f5f3;
    --vs-veil: rgba(16, 18, 20, 0.9);
    --vs-show-dark: inline-block;
    --vs-show-dark-block: block;
    --v-border: #34393e;
    --v-section-white: #101214;
    --v-section-ivory: #15181b;
    --v-section-stone: #1b1e21;
    --v-section-prefooter: #15181b;
    --v-section-footer: #1d2024;
    --v-footer-text-muted: #a3a9af;
    --v-footer-link: #c3c8cd;
    --v-footer-line: #34393e;
    --v-footer-hover: #2a2f34;
    --v-footer-pattern-opacity: 0.18;
  }
}