/* dark.css: the dark theme (js/theme.js sets <html data-theme="dark">) and the theme toggle itself.
   Light stays the designed brand look. Dark is "peak after hours": warm plum-charcoals, never pure black, the brand pink
   as the one accent, and the same band rhythm (deep > mid > deep) so the wavy edges still read.
   Photos and videos are untouched. Tokens first, then the selectors that hard-code light colours. */

/* ---------- theme toggle (both themes): a sun that turns into a moon ---------- */
.theme {
  position: relative; flex: none; display: none; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(43 43 46 / .07); color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), scale .5s var(--spring);
}
.theme--drawer { display: grid; width: 48px; height: 48px; background: var(--mist); }
@media (min-width: 1024px) { .bar .theme { display: grid; } }
@media (hover: hover) { .theme:hover { background: rgb(43 43 46 / .13); } .theme:hover .theme__ico { rotate: 18deg; } }
.theme:active { scale: .9; }
.theme__ico { width: 22px; height: 22px; overflow: visible; transition: rotate .6s var(--spring); }
.theme__core, .theme__bite, .theme__rays { transform-box: view-box; transform-origin: 12px 12px; }
.theme__core { fill: currentColor; transition: scale .6s var(--spring); }
.theme__bite { fill: #000; translate: 9px -9px; transition: translate .55s var(--ease); }
.theme__rays {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: rotate .6s var(--spring), scale .5s var(--ease), opacity .35s var(--ease);
}
[aria-pressed="true"] .theme__core { scale: 1.75; }
[aria-pressed="true"] .theme__bite { translate: 0 0; transition-delay: .08s; }
[aria-pressed="true"] .theme__rays { rotate: 90deg; scale: .3; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .theme, .theme * { transition: none !important; } }

/* the swap: everything changes in the same frame, then a circle of the new theme grows out of the button */
.theme-swap, .theme-swap *, .theme-swap *::before, .theme-swap *::after { transition: none !important; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }

/* ---------- palette ----------
   d0 #121012 deepest (crumble, visit)  · d1 #19161A base · mist #1F1B1F (tunnel top, menu) · mist-2 #282328
   heather #2B252A (space, page) · d3 #2C272B cards · d4 #3A333A raised · plum #2A1822 footer
   text #F4EEF1 (17:1 on d1) · soft #C9BFC4 (10:1 on d1, 8:1 on d3) · pink #E583AA on d1 7.6:1 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --d0: #121012; --d1: #19161A; --d3: #2C272B; --d4: #3A333A; --plum: #2A1822;
  --d-text: #F4EEF1; --d-soft: #C9BFC4; --d-line: rgb(255 228 240 / .13);
  --mist: #1F1B1F; --mist-2: #282328; --fog: #352F34;
  --heather: #2B252A; --heather-cool: #231F23;
}
:root[data-theme="dark"] body { color: var(--d-text); background: var(--d1); }
:root[data-theme="dark"] :focus-visible { outline-color: var(--pink); box-shadow: 0 0 0 5px var(--d1); }
:root[data-theme="dark"] ::selection { background: var(--pink); color: var(--ink); }

/* toggle + bar + drawer */
:root[data-theme="dark"] .theme { color: var(--pink); background: rgb(255 255 255 / .07); }
@media (hover: hover) { :root[data-theme="dark"] .theme:hover { background: rgb(255 255 255 / .13); } }
:root[data-theme="dark"] .theme--drawer { background: var(--d1); }
:root[data-theme="dark"] .bar {
  background-color: var(--mist) !important; /* main.js tweens the scrolled bar to light fog inline */
  box-shadow: 0 10px 30px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .08);
}
:root[data-theme="dark"] .lang { background: rgb(255 255 255 / .07); }
@media (hover: hover) { :root[data-theme="dark"] .lang:hover { background: rgb(255 255 255 / .13); } }
:root[data-theme="dark"] .lang__thumb { background: var(--d-text); }
:root[data-theme="dark"] .lang__opt { color: var(--d-text); }
:root[data-theme="dark"][lang=en] .lang__opt[lang=en], :root[data-theme="dark"][lang=ar] .lang__opt[lang=ar] { color: var(--d1); }
:root[data-theme="dark"] .lang--drawer { background: var(--d1); }
:root[data-theme="dark"] .bar__glow, :root[data-theme="dark"]:not(.js) .bar__links a:hover { background: var(--d4); box-shadow: none; }
:root[data-theme="dark"] .burger[aria-expanded=true] { background: var(--d-text); }
:root[data-theme="dark"] .burger[aria-expanded=true] span { background: var(--d1); }
:root[data-theme="dark"] .drawer.is-open { background: var(--heather); color: var(--d-text); }
:root[data-theme="dark"] .drawer::after { background: radial-gradient(circle at var(--ox, 100%) var(--oy, 0px), rgb(229 131 170 / .2), transparent 60%); }
:root[data-theme="dark"] .drawer .cta.ihb, :root[data-theme="dark"] .cta.ihb { background: var(--d4); color: var(--d-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }

/* hero: dark glass card over the photo */
:root[data-theme="dark"] .card {
  background: rgb(25 22 26 / .8); border-color: rgb(255 255 255 / .12); color: var(--d-text);
  box-shadow: 0 18px 50px rgb(0 0 0 / .45);
}
:root[data-theme="dark"] .card__now { background: var(--pink); color: var(--ink); }
:root[data-theme="dark"] .card__now::before { background: var(--ink); }
:root[data-theme="dark"] .hc { box-shadow: 0 10px 30px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .08); }
:root[data-theme="dark"] .hc__btn { color: var(--d-text); }
@media (hover: hover) { :root[data-theme="dark"] .hc__btn:hover { background: var(--d4); } }

/* crumble: the deepest band; its torch glows do the rest */
:root[data-theme="dark"] .crumble { --cr-ink: var(--d0); }
:root[data-theme="dark"] .crumble__doodle--heart { stroke: var(--d0); }

/* tunnel: a dark stage, the pink dot grid glows, cards keep a hairline */
:root[data-theme="dark"] .tunnel { background: var(--d0); }
:root[data-theme="dark"] .tunnel__stage {
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%, rgb(229 131 170 / .1), transparent 100%),
    linear-gradient(to bottom, var(--mist) 0%, var(--d1) 45%, var(--d0) 100%);
}
:root[data-theme="dark"] .tunnel__dots { background-image: radial-gradient(circle, rgb(229 131 170 / .55) 1.5px, transparent 2px); }
:root[data-theme="dark"] .tunnel__ring { border-color: rgb(255 228 240 / .2); }
:root[data-theme="dark"] .tunnel__ring--b { border-color: rgb(255 228 240 / .12); }
:root[data-theme="dark"] .tunnel__sub { color: var(--d-soft); }
:root[data-theme="dark"] :is(.tunnel__kicker, .tunnel__title, .tunnel__sub) {
  text-shadow: 0 0 14px rgb(25 22 26 / .95), 0 0 34px rgb(25 22 26 / .85), 0 0 60px rgb(25 22 26 / .6);
}
:root[data-theme="dark"] .tcard__btn { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .16), 0 26px 44px -18px rgb(0 0 0 / .7); }
:root[data-theme="dark"] .tcard__btn:is(:hover, :focus-visible) { box-shadow: 0 0 0 3px var(--pink), 0 26px 44px -16px rgb(229 131 170 / .45); }
:root[data-theme="dark"] .tunnel__hint { border-color: rgb(255 255 255 / .45); }

/* menu: dark cards on a mid band; the light thumb and pink counts carry the tabs */
:root[data-theme="dark"] .menu__note { color: var(--d-soft); }
:root[data-theme="dark"] .menu__smile { stroke: var(--d-text); }
:root[data-theme="dark"] .menu__heart { stroke: var(--pink); }
:root[data-theme="dark"] .menu__thumb { background: var(--d-text); box-shadow: 0 8px 20px rgb(0 0 0 / .4); }
:root[data-theme="dark"] .menu__tab { background: rgb(255 255 255 / .06); }
:root[data-theme="dark"] .menu__tab[aria-selected=true] { color: var(--d1); background: transparent; }
@media (hover: hover) { :root[data-theme="dark"] .menu__tab:not([aria-selected=true]):hover { background: rgb(255 255 255 / .12); } }
:root[data-theme="dark"] .menu__count { background: rgb(255 255 255 / .1); }
:root[data-theme="dark"] .menu__tab[aria-selected=true] .menu__count { background: var(--pink); color: var(--ink); }
:root[data-theme="dark"] .menu__tab--star > span:first-child::after { background: var(--pink); }
:root[data-theme="dark"] .menu__tab--star[aria-selected=true] > span:first-child::after { background: var(--pink-deep); }
@media (min-width: 1100px) { :root[data-theme="dark"] .menu__tab { background: transparent; } }
:root[data-theme="dark"] .menu__progress { background: rgb(255 255 255 / .12); }
:root[data-theme="dark"] .menu__progress span { background: var(--pink); }
:root[data-theme="dark"] .dish {
  background: var(--d3);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 18px 40px -22px rgb(0 0 0 / .7);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .dish:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 0 0 1px rgb(229 131 170 / .35), 0 28px 50px -24px rgb(0 0 0 / .8); }
}
:root[data-theme="dark"] .dish__desc { color: var(--d-soft); }
:root[data-theme="dark"] .size { background: var(--d1); }
:root[data-theme="dark"] .size__thumb { background: var(--d-text); box-shadow: 0 4px 10px rgb(0 0 0 / .4); }
:root[data-theme="dark"] .size__opt:has(:checked) span { color: var(--d1); }
@media (hover: hover) { :root[data-theme="dark"] .size__opt:not(:has(:checked)):hover span { color: var(--pink); } }

/* space */
:root[data-theme="dark"] .space__ink { stroke: var(--pink); }
:root[data-theme="dark"] .space__panel { background: var(--d1); box-shadow: inset 0 0 0 1px var(--d-line); }
:root[data-theme="dark"] .space__tile { box-shadow: 0 18px 40px rgb(0 0 0 / .45); }

/* visit: the deepest band, a night map */
:root[data-theme="dark"] .visit {
  --v-bg: var(--d0);
  background: radial-gradient(60% 40% at 100% 0%, rgb(229 131 170 / .09), transparent 70%), var(--v-bg);
}
:root[data-theme="dark"] .vmap { background: #231F23; }
:root[data-theme="dark"] .vmap__svg > rect:first-child { fill: #231F23; }
:root[data-theme="dark"] .vmap__svg > g[fill] { fill: #2F2A2F; }
:root[data-theme="dark"] .vmap__svg > rect[fill="#BFC2BE"] { fill: #4A3440; }
:root[data-theme="dark"] .vmap__svg > g[stroke="#fff"] { stroke: #3F393F; }
:root[data-theme="dark"] .vmap__svg > circle[fill="#E583AA"] { fill-opacity: .22; }
:root[data-theme="dark"] .vmap__route { stroke: var(--pink); }
:root[data-theme="dark"] .vmap__walker { fill: var(--d-text); stroke: var(--d0); }
:root[data-theme="dark"] .vmap__label { color: var(--d-text); background: rgb(25 22 26 / .86); }
:root[data-theme="dark"] .vmap__label--rj { background: transparent; }
:root[data-theme="dark"] .vmap__tag { background: var(--d-text); color: var(--d1); }

/* footer: goes deep. A plum panel under the same living wave, the giant wordmark in brand pink */
:root[data-theme="dark"] .foot { background: var(--d0); color: var(--d-text); }
:root[data-theme="dark"] .foot__wave { fill: var(--plum); }
:root[data-theme="dark"] .foot__panel {
  background:
    radial-gradient(70% 45% at 50% 100%, rgb(229 131 170 / .14), transparent 70%),
    var(--plum);
}
:root[data-theme="dark"] .foot__kicker { color: var(--pink); }
:root[data-theme="dark"] .m-w--hl::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 5 80 4 118 8s58 6 79-2' fill='none' stroke='%23E583AA' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .foot__love { border-color: rgb(255 228 240 / .4); background: rgb(255 255 255 / .06); }
@media (hover: hover) { :root[data-theme="dark"] .foot__love:hover { background: rgb(255 255 255 / .12); } }
:root[data-theme="dark"] .foot__love-heart { fill: var(--pink); stroke: var(--plum); }
:root[data-theme="dark"] .foot__count { background: var(--pink); color: var(--ink); }
:root[data-theme="dark"] .foot__burst { fill: var(--pink); stroke: var(--plum); }
:root[data-theme="dark"] .doodle { stroke: var(--pink); }
:root[data-theme="dark"] .doodle--heart { stroke: var(--d-text); }
:root[data-theme="dark"] :is(.foot__links, .foot__link, .foot__legal) { border-color: rgb(255 228 240 / .2); }
@media (hover: hover) { :root[data-theme="dark"] .foot__link:hover { background: rgb(255 255 255 / .06); color: var(--pink); } }
:root[data-theme="dark"] .tape { box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); }
:root[data-theme="dark"] .tape--front { background: var(--pink); color: var(--ink); }
:root[data-theme="dark"] .tape--front .tape__sep--heart svg { fill: var(--ink); }
:root[data-theme="dark"] .tape--front .tape__sep--smile svg { stroke: var(--ink); }
:root[data-theme="dark"] .tape--back { background: var(--d1); color: var(--d-text); }
:root[data-theme="dark"] .tape--back .tape__sep--heart svg { fill: var(--pink); }
:root[data-theme="dark"] .tape--back .tape__sep--smile svg { stroke: var(--pink); }
:root[data-theme="dark"] .foot__mark { fill: var(--pink); }
:root[data-theme="dark"] .fw__heart { fill: var(--d-text); stroke: var(--plum); }
:root[data-theme="dark"] .foot__lines { stroke: rgb(255 228 240 / .55); }
:root[data-theme="dark"] .foot__pill-line { background: var(--d0); }
:root[data-theme="dark"] .foot__pill::after { box-shadow: inset 0 0 0 2px var(--plum); }
:root[data-theme="dark"] .foot__top { background: var(--pink); color: var(--ink); }
:root[data-theme="dark"] .foot__top-ico { background: var(--ink); color: var(--pink); }
:root[data-theme="dark"] :is(.foot a, .foot__love):focus-visible { outline-color: var(--pink); box-shadow: 0 0 0 5px var(--plum); }

/* the scrolled logo badge (filled by main.js from --badge): warm raised plum instead of the light theme's cool slate */
:root[data-theme="dark"] { --badge: #3A333A; }