/* ─────────────────────────────────────────────────────────────────────────
   Dark mode — the site's original dark-navy/moodboard palette, brought
   back as a toggle instead of being lost when journal.css repainted the
   whole site into the light watercolor-paper direction.

   Loaded after journal.css, so this wins the cascade on equal specificity
   the same way journal.css already wins over styles.css. Everything here
   is scoped under [data-theme="dark"] (set on <html> by theme.js, which
   also persists the choice to localStorage and defaults to the current
   light theme for anyone who hasn't chosen yet) - so with the attribute
   absent, the site renders exactly as journal.css already left it, no
   different from before this file existed.

   This is NOT a rewrite of journal.css's approach - it's journal.css's
   mirror image. Every rule below exists because a specific rule in
   journal.css changed something (a root color token, or a component's
   color to compensate for one) that needs to go back to its pre-journal
   value here. Two exceptions on purpose, left alone in both themes since
   they're not really "color theme" at all: the softened ink-wash card/
   button shadows (a stylistic choice, not light-vs-dark), and the fixed
   music player's vintage-wood-radio redesign (its own self-contained
   material, never tied to the page's palette to begin with - see its
   own header comment further down journal.css). The mobile menu panel
   was already hardcoded dark navy before any of this existed, so it
   needs nothing here either. ───────────────────────────────────────── */

:root[data-theme="dark"] {
  --color-midnight: #00021e;
  --color-ink: #1a1330;
  --color-pearl: #f8f9fb;
  --color-platinum: #d9d9d9;
  --color-accent-red: #c8102e;
  --color-ember: #ff8a4c;
  --foreground: var(--color-pearl);
  --sticker-yellow: #ffd23f;
  --sticker-pink: #ff6fb0;
  --sticker-lime: #b6ff5c;
  --sticker-sky: #5fd8f9;
  --card: #0a1240;
  --muted-foreground: #9aa4c2;
  --glass-bg-dark: rgb(11 22 51 / 55%);
  --glass-border-dark: rgb(217 217 217 / 12%);
  --shadow-premium: 0 8px 32px rgb(0 3 41 / 30%), 0 0 0 1px rgb(217 217 217 / 8%);
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: var(--color-midnight);
  background-image: none;
}

[data-theme="dark"] ::selection { background: rgba(255, 138, 76, 0.35); }

/* Halftone: back to the original dot-grid (the wash-bloom look in
   journal.css was built specifically to sit on light paper). */
[data-theme="dark"] .halftone,
[data-theme="dark"] .halftone--tr,
[data-theme="dark"] .halftone--bl,
[data-theme="dark"] .halftone--mid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
  filter: none;
}
[data-theme="dark"] .halftone { opacity: 0.5; }
[data-theme="dark"] .halftone--tr,
[data-theme="dark"] .halftone--bl {
  mask-image: radial-gradient(circle, black 40%, transparent 72%);
  border-radius: 0;
}
[data-theme="dark"] .halftone--mid {
  mask-image: radial-gradient(ellipse, black 30%, transparent 70%);
  border-radius: 0;
  opacity: 0.3;
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #170b3a 0%, transparent 60%),
    linear-gradient(180deg, #0b0424 0%, var(--color-midnight) 55%, #000114 100%);
}

[data-theme="dark"] .hero__title { color: var(--color-pearl); }

[data-theme="dark"] .site-footer__link { color: var(--color-pearl) !important; }

[data-theme="dark"] .poster--orange,
[data-theme="dark"] .poster--yellow,
[data-theme="dark"] .poster--pink,
[data-theme="dark"] .poster--sky,
[data-theme="dark"] .poster--lime,
[data-theme="dark"] .gimmick-pill--yellow:hover,
[data-theme="dark"] .gimmick-pill--sky:hover,
[data-theme="dark"] .gimmick-pill--lime:hover,
[data-theme="dark"] .trip-card__price,
[data-theme="dark"] .intl-card__ribbon {
  color: var(--color-ink);
}

[data-theme="dark"] .reel__tag { color: var(--color-midnight); }

[data-theme="dark"] .trips-month-tab.is-active,
[data-theme="dark"] .trips-month-tab.is-active:hover {
  color: var(--color-ink);
}

[data-theme="dark"] .boot-screen__sticker--1,
[data-theme="dark"] .sticker--shuffle,
[data-theme="dark"] .modal--yellow .modal__eyebrow,
[data-theme="dark"] .modal--yellow .modal__headline,
[data-theme="dark"] .modal--yellow .modal__quote,
[data-theme="dark"] .stamp--unlocked,
[data-theme="dark"] .toast--stamp {
  color: var(--color-ink);
}

[data-theme="dark"] .topbar__menu-btn,
[data-theme="dark"] .theme-toggle {
  color: var(--color-pearl);
}

[data-theme="dark"] .seal-wave { opacity: 0.7; }

[data-theme="dark"] .gimmick-pill { color: var(--color-pearl); }

[data-theme="dark"] .boot-screen__duotone {
  background: linear-gradient(155deg, rgba(200, 16, 46, 0.55) 0%, rgba(255, 138, 76, 0.4) 45%, rgba(255, 111, 176, 0.5) 100%);
  mix-blend-mode: color;
}

[data-theme="dark"] .boot-screen__scrim {
  background: linear-gradient(180deg, rgba(0, 2, 20, 0.4) 0%, rgba(0, 2, 20, 0.2) 40%, rgba(0, 2, 20, 0.88) 100%);
}

/* .bl scaffold (brands/originals/creators/deck/host): --bl-cream is now
   the LOCKED #fffdd0 (brands.css's own .bl block), not routed through
   --color-pearl - reasserted here so toggling dark mode can't revert it
   back to the old cool pearl value. --bl-navy/--bl-burgundy are also
   locked literals in brands.css and untouched by the toggle either way,
   so they need no counterpart here. -dim/-faint are unchanged from
   before (not part of the 3 locked values). --bl-burgundy-bright DOES
   need a counterpart now, unlike when this comment was first written -
   it used to be `var(--color-ember)`, restored for free by this same
   selector's root-level dark-mode override of --color-ember elsewhere
   in this file; now that brands.css gives it its own literal tint
   instead (see that file's comment on why), journal.css's light-mode
   .bl rule pointing it at the plain maroon --bl-burgundy needs an
   explicit reassert back to the bright tint here, same as -cream above. */
[data-theme="dark"] .bl {
  --bl-cream: #fffdd0;
  --bl-cream-dim: var(--color-platinum);
  --bl-cream-faint: rgb(217 217 217 / 45%);
  --bl-burgundy-bright: #e94971;
}

/* .mag-* (goa/gokarna/pondicherry/varkala): body.mag's default text
   color goes back to pearl, its own original value, now that the page
   itself is dark navy again. .mag-hero's re-scope in journal.css
   already resolves to var(--color-pearl) either way, so it needs no
   counterpart here - same reasoning as .bl's photo-scrim islands above. */
[data-theme="dark"] body.mag { color: var(--color-pearl); }

[data-theme="dark"] .mag-cta__questions li { color: var(--color-pearl); }

[data-theme="dark"] .xp__outro { color: var(--xp-cream); }

[data-theme="dark"] .mag-intro__lede { color: var(--color-pearl); }

/* Back to the single bright --mag-accent every one of these five
   originally read, now that the page itself is dark navy again and
   the darkened --mag-accent-ink variant isn't needed. */
[data-theme="dark"] .mag-section__eyebrow,
[data-theme="dark"] .mag-list__num,
[data-theme="dark"] .mag-list__tag,
[data-theme="dark"] .mag-pullquote__mark,
[data-theme="dark"] .mag-plan__label,
[data-theme="dark"] .mag-plan__hint,
[data-theme="dark"] .mag-intro p:first-of-type::first-letter,
[data-theme="dark"] .xp__intro-sub,
[data-theme="dark"] .xp__title,
[data-theme="dark"] .xp__tag::after {
  color: var(--mag-accent);
}

/* .td-* (trip-detail modal): back to the original dark-navy values.
   The --color-platinum-based fixes above (.td-clock__span etc.) and the
   .td-hero re-scope need no counterpart here - both already resolve
   correctly in dark mode via the tokens themselves. */
[data-theme="dark"] .td { color: var(--color-pearl); }

[data-theme="dark"] .td-dna__not span,
[data-theme="dark"] .td-host__rows dd,
[data-theme="dark"] .td-get__not span {
  color: var(--color-pearl);
}

/* Same counterpart, for the three newer .td-* additions (Quick Facts,
   Your Pace, the DROP section's closing line) that also followed
   journal.css's --color-ink-for-text convention - see styles.css's own
   .td-facts__value/.td-pace__headline/.td-drop__closing rules. */
[data-theme="dark"] .td-facts__value,
[data-theme="dark"] .td-pace__headline,
[data-theme="dark"] .td-drop__closing {
  color: var(--color-pearl);
}

[data-theme="dark"] .td-journey__num { color: rgba(248, 249, 251, 0.16); }

[data-theme="dark"] .td-hero__meta,
[data-theme="dark"] .td-dna__for li,
[data-theme="dark"] .td-dna__for li:last-child,
[data-theme="dark"] .td-journey__stop,
[data-theme="dark"] .td-journey__stop:last-child,
[data-theme="dark"] .td-places__item,
[data-theme="dark"] .td-places__item:last-child,
[data-theme="dark"] .td-get__list li,
[data-theme="dark"] .td-get__list li:last-child,
[data-theme="dark"] .td-host__file,
[data-theme="dark"] .td-host__rows > div,
[data-theme="dark"] .td-bring__list li,
[data-theme="dark"] .td-clock,
[data-theme="dark"] .td-drop {
  border-color: rgba(248, 249, 251, 0.16);
}