/*
 * happyhotel case — design tokens
 *
 * The single source of truth for colour, surface and shadow values. Light
 * theme lives in :root, dark theme in html[data-theme="dark"], so the whole
 * page switches by swapping one attribute. No literal colour value belongs
 * anywhere else. Also carries the two layout constants --rail and --maxw.
 */
:root{
  --bg:#f6f8fc; --ink:#0b111b; --muted:#617087; --line:#e1e7f0; --raised:#ffffff;
  /* Page surface is one --bg throughout. --band is kept for token parity with
     dark theme; it is not painted on sections. White (--raised) is cards only. */
  --band:#f8fafd;
  /* Shared frost for the top bar and the one glass card.
     Transparent enough that content scrolling underneath stays visible;
     the blur lives on the elements themselves via --glass-filter. */
  --glass-fill:color-mix(in srgb,var(--bg) 62%,transparent);
  --glass-filter:saturate(180%) blur(20px);
  --accent:#6f7ff1; --accent-soft:rgba(111,127,241,.10);
  --ok:#237a50; --ok-soft:rgba(35,122,80,.08);
  --danger:#c24b59; --danger-soft:rgba(194,75,89,.08);
  --warn:#9a6b1f; --warn-soft:rgba(154,107,31,.09);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rail:248px; --maxw:720px;
  --lift:0 1px 1.5px -0.5px color-mix(in srgb,var(--ink) 5%,transparent),
         0 3px 8px -3px color-mix(in srgb,var(--ink) 4%,transparent);
  --hover-veil:color-mix(in srgb,var(--ink) 4.5%,transparent);
  --hover-media:var(--lift),inset 0 0 0 999px var(--hover-veil);
  /* Dim behind the medium lightbox. Mixes --ink so both themes stay token-only. */
  --overlay:color-mix(in srgb,var(--ink) 46%,transparent);
  /* Thin veil over the blurred case while the password gate is up. */
  --gate-veil:color-mix(in srgb,var(--bg) 38%,transparent);
  /* Hero CSS-mock: accent mixed into --line for bars, selected queue, primary chip. */
  --accent-line:color-mix(in srgb,var(--accent) 34%,var(--line));
  --accent-mark:color-mix(in srgb,var(--accent) 55%,var(--line));
  /* Neutral chip: a step lighter than --bg, for tags on page or --raised. */
  --tag-fill:color-mix(in srgb,var(--bg) 40%,var(--raised));
  /* Glossary word in running copy: a veil, not a chip lift. */
  --term-fill:color-mix(in srgb,var(--ink) 4%,var(--bg));
  --term-line:color-mix(in srgb,var(--line) 62%,var(--bg));
  /* Contrast close: footer is always a dark end, independent of page --bg. */
  --end:#0b111b;
  --end-ink:#f5f7fb;
  --end-muted:#8e99aa;
  --end-line:#1b2230;
  --end-raised:#161d28;
  --end-warn:#e6bb6a;
  --end-warn-soft:rgba(230,187,106,.10);
  --end-accent:#9ba9ff;
  --end-accent-soft:rgba(155,169,255,.12);
  --end-conf-line:color-mix(in srgb,var(--end-warn) 30%,var(--end-line));
}
html[data-theme="dark"]{
  --bg:#0c1118; --ink:#f5f7fb; --muted:#8e99aa; --line:#1b2230; --raised:#161d28;
  --band:#101620;
  /* 62 % of dark --bg lets --ink headlines punch through the sticky bar.
     Heavier fill keeps the frost without the header sinking under the page. */
  --glass-fill:color-mix(in srgb,var(--bg) 88%,transparent);
  --accent:#9ba9ff; --accent-soft:rgba(155,169,255,.12);
  --ok:#75d8a1; --ok-soft:rgba(117,216,161,.10);
  --danger:#ff9393; --danger-soft:rgba(255,147,147,.10);
  --warn:#e6bb6a; --warn-soft:rgba(230,187,106,.10);
  /* auf dunklem Grund trägt Schatten kaum — enger, tiefer, plus Lichtkante oben */
  --lift:0 1px 1px -0.5px rgba(0,0,0,.32),
         0 2px 5px -3px rgba(0,0,0,.26),
         inset 0 1px 0 rgba(255,255,255,.02);
  --hover-veil:color-mix(in srgb,var(--ink) 6%,transparent);
  --hover-media:var(--lift),inset 0 0 0 999px var(--hover-veil);
  /* --ink is light in dark theme, so a straight ink mix would bleach the page.
     Fold a little ink into the same black alpha --lift already uses. */
  --overlay:color-mix(in srgb,var(--ink) 14%,rgba(0,0,0,.62));
  --gate-veil:color-mix(in srgb,var(--bg) 52%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 34%,var(--line));
  --accent-mark:color-mix(in srgb,var(--accent) 55%,var(--line));
  --tag-fill:color-mix(in srgb,var(--bg) 40%,var(--raised));
  --term-fill:color-mix(in srgb,var(--ink) 4%,var(--bg));
  --term-line:color-mix(in srgb,var(--line) 62%,var(--bg));
  /* One step below page --bg so the close still reads as an ending. */
  --end:#05070b;
  --end-ink:#f5f7fb;
  --end-muted:#8e99aa;
  --end-line:#121820;
  --end-raised:#0c1118;
  --end-warn:#e6bb6a;
  --end-warn-soft:rgba(230,187,106,.10);
  --end-accent:#9ba9ff;
  --end-accent-soft:rgba(155,169,255,.12);
  --end-conf-line:color-mix(in srgb,var(--end-warn) 30%,var(--end-line));
}