/* ============================================================
   Hotel Afisha — shared theme tokens (light + dark)
   ------------------------------------------------------------
   Loaded on every page BEFORE the page's own <style> block.

   Two token families live here:

   1. SEMANTIC tokens (--bg, --text, --surface…) describe a ROLE,
      not a colour. These are what flips between themes.
   2. LEGACY tokens (--ink, --paper, --grey…) are the original
      palette names still referenced across the pages. They are
      defined here at their exact present-day values so that any
      declaration not yet migrated keeps rendering as it does now.

   Why roles and not colours: --ink used to mean both "body text"
   and "dark band background". One name, two opposite jobs — so it
   could never be flipped. Splitting it into --text and --inverse-bg
   is what makes a dark theme possible at all.

   Dark rules use :root[data-theme="dark"] (specificity 0,2,0) so
   they beat each page's own inline :root block (0,1,0) regardless
   of source order. Don't weaken that selector.
   ============================================================ */

:root {
  color-scheme: light;

  /* — surfaces — */
  --bg: #FAF8F5;              /* page background */
  --bg-alt: #F2EDE6;          /* alternating section background */
  --surface: #FFFFFF;         /* cards, panels, sheets */
  --surface-2: #FAF8F5;       /* nested/inset surface */

  /* — text — */
  --text: #232122;            /* primary copy + headings */
  --text-2: #2C2C2C;          /* secondary copy */
  --text-muted: #595859;      /* captions, meta, labels */

  /* — lines — */
  --line: rgba(35, 33, 34, 0.14);
  --line-strong: rgba(35, 33, 34, 0.32);
  --line-soft: rgba(89, 88, 89, 0.16);   /* grey-cast hairline; kept exact */

  /* — inverted bands (footer, dark feature sections) —
     Deliberately dark in BOTH themes; they are a design device,
     not a consequence of the light palette. */
  --inverse-bg: #232122;
  --inverse-bg-2: #2B292A;
  --on-inverse: #FAF8F5;      /* text sitting on those bands */

  /* — brand —
     --accent is the solid fill (buttons); --accent-text is the same
     red used as TEXT, brightened in dark mode to stay legible. */
  --accent: #DD4747;
  --accent-deep: #C53B3B;
  --accent-text: #DD4747;

  --shadow: rgba(35, 33, 34, 0.10);
  --shadow-soft: rgba(35, 33, 34, 0.14);
  --shadow-strong: rgba(35, 33, 34, 0.18);

  /* Translucent sticky header. This element is what Safari samples to
     colour the iOS status-bar strip, so it must stay solid-ish and
     match --bg closely in both themes. */
  --header-bg: rgba(250, 248, 245, 0.92);
  --header-bg-solid: rgba(250, 248, 245, 0.98);  /* .header.scrolled */
  --subnav-bg: rgba(250, 248, 245, 0.95);        /* menus.html jump nav */

  /* — legacy palette names: present-day light values — */
  --red: #DD4747;
  --red-deep: #C53B3B;
  --blue: #243E93;
  --ink: #232122;
  --ink-surface: #2B292A;
  --grey: #595859;
  --paper: #FAF8F5;
  --cream: #F2EDE6;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Warm near-blacks, not pure #000: the brand is cream-and-ink,
     and a neutral black next to #DD4747 reads cheap and cold. */
  --bg: #151414;
  --bg-alt: #1B1A1A;
  --surface: #1F1D1E;
  --surface-2: #262324;

  --text: #F2EDE6;            /* 15.8:1 on --bg */
  --text-2: #E8E2DA;
  --text-muted: #A9A4A0;      /* 7.5:1 — passes AA as body text */

  --line: rgba(242, 237, 230, 0.14);
  --line-strong: rgba(242, 237, 230, 0.30);
  --line-soft: rgba(242, 237, 230, 0.16);

  /* Bands go DARKER than the page so they stay distinct instead of
     dissolving into it — the inverse of their role in light mode. */
  --inverse-bg: #0F0E0E;
  --inverse-bg-2: #151414;
  --on-inverse: #F2EDE6;

  --accent: #DD4747;          /* solid fills keep the exact brand red */
  --accent-deep: #C53B3B;
  --accent-text: #E86A6A;     /* 5.9:1 on --bg (brand red alone is 4.4:1) */

  --shadow: rgba(0, 0, 0, 0.5);
  --shadow-soft: rgba(0, 0, 0, 0.45);
  --shadow-strong: rgba(0, 0, 0, 0.6);

  --header-bg: rgba(21, 20, 20, 0.92);
  --header-bg-solid: rgba(21, 20, 20, 0.98);
  --subnav-bg: rgba(21, 20, 20, 0.95);

  /* Legacy names follow their dominant historical role. --ink is
     omitted on purpose: it was ambiguous, so every use of it is
     migrated to --text / --inverse-bg / --line-strong instead. */
  /* Every text use of --red was migrated to --accent-text; all 101 remaining
     uses are solid fills and borders, so this must stay the true brand red.
     Brightening it here would wash out buttons and drop white-on-red below
     its light-mode contrast. */
  --red: #DD4747;
  --red-deep: #C53B3B;
  --blue: #7B8FD4;            /* #243E93 is unreadable on a dark ground */
  --ink-surface: #262324;
  --grey: #A9A4A0;
  --paper: #151414;
  --cream: #1B1A1A;
}

/* Media, logos and video keep their own colour. Photography must not
   be dimmed — a hotel sells the room, and a muddied hero is a worse
   sin than a bright rectangle at night. */
:root[data-theme="dark"] img,
:root[data-theme="dark"] video {
  /* intentionally untouched — documented so nobody "fixes" it later */
}

/* ---- Hide the page scrollbar --------------------------------
   Requested: no scrollbar down the side of the site.

   This hides the BAR ONLY — the page still scrolls by wheel, trackpad,
   touch, keyboard (arrows / space / Page Up / Home / End) and anchor
   links. Never swap this for overflow:hidden, which would actually stop
   the page scrolling.

   Scoped to the document scroller on purpose. A blanket `*` rule would
   also strip the bars off the admin panel's scrollable lists, modals and
   textareas, where they are the only cue that content continues. */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome, Safari, Edge */
}

/* Cross-fade on theme change, but never on first paint and never for
   users who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-anim,
  :root.theme-anim body {
    transition: background-color .28s ease, color .28s ease;
  }
}

/* ---- Theme toggle control ---------------------------------- */
.theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  flex: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: var(--line); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the icon for the theme you'd switch TO, not the one you're in. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }