/* A copy of frontend/src/app/ds/tokens.css for the public site (ADR 0147). Generated by scripts/site-ds.mjs: do not edit. */
/* ==========================================================================
 * The design system's tokens: DESIGN.md §2–§3, ADR 0138 (as amended in rounds 2–4).
 *
 * One name per token, and that name is Tailwind's: `--color-ink-2` is both the variable a component's CSS reads and
 * the `text-ink-2` utility a page composes with. `@theme static` emits every one, also those no utility uses yet
 * (Tailwind drops unused theme variables otherwise, and a component's `var(--color-ink-3)` would resolve to nothing).
 *
 * Ink on paper is the identity; colour is spent on trends and statuses; the brand is a night surface, never a status,
 * a trend, a figure, a chart or a focus ring, and a page only where the night is the page: the lobby, and the dark
 * theme (§2, §2.2, ADR 0148). Pending is a form (a hollow ring, a dashed edge), not a hue. The brand is indigo (ANA-187,
 * D2); in the light its neutrals lean a few thousandths of chroma toward it. Every pair a component may draw is measured in
 * tokens.test.ts, in both themes.
 *
 * Dark mode (D3, shipped in B6a behind the experience switch): the reader chooses מערכת, בהיר or כהה at the drawer's
 * foot (`@/lib/theme`), and the root layout writes it on `<html>` as `data-theme="system" | "light" | "dark"`. The dark
 * values below apply under "dark", and under "system" while the device prefers dark — the same block twice, which
 * tokens.test.ts holds identical. On the document they apply only while it shows a page on the system (`.ds-page`, the
 * person's own frame `.ds-acct`, the sign-in frame `.ds-signin`): the old kit shares `--color-ink` and `--color-line`
 * with these tokens and would turn unreadable, so a page that has not moved stays light, its chrome with it. A region
 * can still be dark, or light, on its own (`data-theme` below the root: the gallery's specimens). The derived tokens
 * are restated there, because a custom property computes where it is declared.
 * ========================================================================== */

/* The brand roles and the neutrals are registered, so a change of theme or hue cross-fades instead of jumping. */
@property --color-paper { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --color-wash { syntax: "<color>"; inherits: true; initial-value: #f4f5fa; }
@property --color-wash-2 { syntax: "<color>"; inherits: true; initial-value: #e8e9ee; }
@property --color-line { syntax: "<color>"; inherits: true; initial-value: #e8e9ee; }
@property --color-line-2 { syntax: "<color>"; inherits: true; initial-value: #dbdce1; }
@property --color-ink { syntax: "<color>"; inherits: true; initial-value: #0e0f14; }
@property --color-ink-2 { syntax: "<color>"; inherits: true; initial-value: #50525a; }
@property --color-ink-3 { syntax: "<color>"; inherits: true; initial-value: #6b6d76; }
@property --color-layer { syntax: "<color>"; inherits: true; initial-value: #141534; }
@property --color-layer-2 { syntax: "<color>"; inherits: true; initial-value: #212445; }
@property --color-on-layer { syntax: "<color>"; inherits: true; initial-value: #f3f5fc; }
@property --color-on-layer-2 { syntax: "<color>"; inherits: true; initial-value: #b3b7c5; }
@property --color-glow { syntax: "<color>"; inherits: true; initial-value: #c1c0ff; }
@property --color-glow-2 { syntax: "<color>"; inherits: true; initial-value: #a1dafc; }
@property --color-brand { syntax: "<color>"; inherits: true; initial-value: #27256c; }
@property --color-on-brand { syntax: "<color>"; inherits: true; initial-value: #f3f5fc; }
@property --color-tint { syntax: "<color>"; inherits: true; initial-value: #dfe2fe; }

:root {
  /* surfaces */
  --color-paper: #ffffff; /* the page; tables, the equation, the ledger */
  /* a code a camera reads (the authenticator's QR): dark on light in both themes, never inverted */
  --color-code-ink: #000000;
  --color-code-paper: #ffffff;
  --color-raised: #ffffff; /* cards you act on, popovers, sheets */
  --color-wash: #f4f5fa; /* hover, a selected row, a segmented track */
  --color-wash-2: #e8e9ee;
  --color-line: #e8e9ee; /* hairlines (decoration) */
  --color-line-2: #dbdce1;
  --color-control: #808080; /* the edge of a control, a pill, a thumb or a knob: ≥ 3:1 on paper, wash and wash-2 (WCAG 1.4.11) */
  /* what is chosen or raised above a wash — the current tab's pill, the chosen segment, a secondary button, an off
   * switch's knob: white in the light; in the dark a step lighter than its track, as a raised thing is, never black */
  --color-thumb: var(--color-raised);
  --color-knob: var(--color-raised);

  /* ink */
  --color-ink: #0e0f14; /* figures, names, primary buttons */
  --color-ink-2: #50525a; /* labels, status words, secondary text */
  --color-ink-3: #6b6d76; /* captions, units (₪), meta, missing */
  --color-ink-4: #b8b8b8; /* equation operators, a comparison line: decoration only, never text */

  /* meaning: a trend is coloured by what it means for the restaurant, always with its arrow and a word */
  --color-up: #067a4a; /* good for the restaurant · confirmed */
  --color-down: #c8261b; /* bad for the restaurant · a person must act */
  --color-attention: #975a00; /* worth knowing, over a target */
  --color-pending: var(--color-ink-2); /* drawn as a form (hollow ring, dashed edge); never summed */
  --color-missing: var(--color-ink-3); /* "—" and its reason; never zero */
  --color-up-wash: color-mix(in oklab, var(--color-up) 9%, var(--color-paper));
  --color-down-wash: color-mix(in oklab, var(--color-down) 8%, var(--color-paper));
  --color-attention-wash: color-mix(in oklab, var(--color-attention) 10%, var(--color-paper));

  /* the brand: a night layer and its glow (indigo) */
  --color-layer: #141534; /* the drawer, the mark, toasts, tooltips, the agent's tiles */
  --color-layer-2: #212445;
  --color-tile: var(--color-layer); /* a small night tile on a surface: the agent's, a dialog's icon. In the dark the layer sits too near the wash to show, so it rises */
  --color-on-layer: #f3f5fc;
  --color-on-layer-2: #b3b7c5;
  --color-glow: #c1c0ff; /* only on the layer or the brand tone */
  --color-glow-2: #a1dafc;
  --color-brand: #27256c; /* the one action Morest proposes, "שאל", a pressed control, the menu's badge */
  --color-on-brand: var(--color-on-layer);
  --color-brand-icon: var(--color-glow); /* the icon on the brand tone: the glow; in the dark, where the brand is luminous, its ink */
  --color-tint: #dfe2fe; /* text selection */

  /* the lobby (ADR 0145, DESIGN.md §2.1): the brand's night as the page of every screen before a restaurant opens, lit
   * by the glow's own hue — the same in both themes. Never on a restaurant's page, a figure, a status or a chart. */
  --color-lobby-deep: #090a1f; /* the night under the light: the document's ground, the browser's chrome */
  --color-lobby-night: #141534; /* the indigo layer, fixed: the lobby's paper, the ink of its one action */
  --color-lobby-violet: #7c5cf6; /* the light the room is lit with: the glow's hue at full strength */
  --color-lobby-orchid: #b07cf2; /* its warmer side, toward plum's glow-2 */
  --color-lobby-orchid-light: #cbb8ff; /* the one action's far side (the glow is its near side) */
  --color-lobby-lit: #45309a; /* the brightest the sky gets behind a card: where its text is measured (tokens.test.ts) */

  /* type: one family; figures are light, words are medium (§3.2) */
  --font-ds: "IBM Plex Sans Hebrew", "IBM Plex Sans Hebrew Fallback", system-ui, "Segoe UI", Arial, sans-serif;
  --text-hero: clamp(60px, 7.6vw, 112px);
  --text-hero--line-height: 1;
  --text-hero--font-weight: 200;
  --text-hero--letter-spacing: -0.045em;
  --text-hero-side: clamp(52px, 6vw, 84px); /* a hero beside its list: r6 צוות's hours over the target (r6.css:23 .pp6-fig) */
  --text-unit-hero: 0.32em; /* a hero's unit word beside it ("ש׳", r6.css:25) */
  --text-stepper: 56px;
  --text-stepper--line-height: 1;
  --text-stepper--font-weight: 200;
  --text-stepper--letter-spacing: -0.04em;
  --text-figure-l: 28px;
  --text-figure-l--line-height: 1.1;
  --text-figure-l--font-weight: 300;
  --text-figure-l--letter-spacing: -0.02em;
  --text-figure-m: 24px;
  --text-figure-m--line-height: 1.1;
  --text-figure-m--font-weight: 300;
  --text-figure-m--letter-spacing: -0.02em;
  --text-title-page: 28px;
  --text-title-page--line-height: 1.15;
  --text-title-page--font-weight: 500;
  --text-title-section: 15px;
  --text-title-section--line-height: 1.4;
  --text-title-section--font-weight: 600;
  --text-title-pane: 22px; /* a pane's heading beside a list or a month: the open ticket, the day beside ימים (r6 .daypane h2) */
  --text-title-dialog: 18px; /* a dialog's or a sheet's question */
  --text-title-dialog--line-height: 1.3;
  --text-title-dialog--font-weight: 600;
  --text-body: 15px;
  --text-body--line-height: 1.6;
  --text-body--font-weight: 400;
  --text-label: 13px;
  --text-label--line-height: 1.4;
  --text-label--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--font-weight: 400;
  /* the controls' own sizes, as r6 draws them (d-ink.css:282, 353, 369, 391) */
  --text-control: 14px; /* a button's words */
  --text-tab: 13.5px; /* a tab's and a segment's words */
  --text-chip: 12.5px; /* a chip's words */
  --text-count: 11px; /* the count in its round chip */
  --text-unit: 0.84em; /* a unit beside its figure in text (₪, %): relative to the figure it follows */
  --text-unit-display: 0.5em; /* a unit beside a display figure (hero, stepper, figure-l/-m), raised to the cap height */

  /* radius: hierarchy shows in the corner — a sheet is rounder than a card, a card than a control */
  --radius-chip: 6px;
  --radius-control: 10px; /* controls, rows, cells */
  --radius-popover: 14px; /* popovers, menus */
  --radius-card: 20px; /* cards, the palette */
  --radius-sheet: 28px;

  /* easing (§3.5): `ds-out` settles, springs are damped (ζ .8 and .7) and written out for CSS linear() */
  --ease-ds-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ds-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-ds-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: linear(0, 0.026, 0.091, 0.179, 0.279, 0.381, 0.481, 0.574, 0.657, 0.731, 0.794, 0.846, 0.889, 0.924, 0.951, 0.972, 0.988, 0.999, 1.006, 1.011, 1.014, 1.015, 1.015, 1.014, 1.013, 1.012, 1.01, 1.009, 1.007, 1.006, 1.005, 1.004, 1);
  --ease-spring-pop: linear(0, 0.034, 0.118, 0.231, 0.356, 0.482, 0.6, 0.706, 0.796, 0.87, 0.928, 0.973, 1.004, 1.026, 1.038, 1.045, 1.046, 1.044, 1.04, 1.035, 1.029, 1.023, 1.018, 1.013, 1.009, 1.006, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 1);
}

/* What Tailwind has no namespace for: motion, depth, layers, density and the page's measures. */
:root {
  /* motion answers the person (§3.5) */
  --dur-press: 110ms; /* a button or a tile pressed (scale .97) */
  --dur-fast: 160ms; /* a hover colour, a toggletip */
  --dur-base: 240ms; /* a list's hover glide, a soft region fading in, a toast leaving */
  --dur-slow: 380ms; /* the pill and the segmented thumb sliding, a row collapsing */
  --dur-roll: 600ms; /* a figure's digits rolling (26 ms stagger from the last digit) */
  --dur-draw: 1100ms; /* a chart's line on the page's first load */
  --dur-enter: 640ms; /* a section rising in the visit's one entrance (55 ms apart; none under reduced motion) */
  --dur-sheet: 460ms; /* the phone sheet */
  --dur-drawer-in: 600ms; /* the drawer enters on the spring … */
  --dur-drawer-out: 300ms; /* … and leaves faster */
  --dur-theme: 600ms; /* the theme's circular reveal from its switch (none under reduced motion) */

  /* depth: a ring instead of a border; shadows only on what floats */
  --elev-ring: 0 0 0 1px rgb(0 0 0 / 0.07);
  --elev-raise: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -8px rgb(0 0 0 / 0.1);
  --elev-pop: 0 0 0 1px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.04), 0 16px 40px -8px rgb(0 0 0 / 0.18);
  --elev-sheet: 0 -1px 0 rgb(0 0 0 / 0.05), 0 -24px 60px -20px rgb(0 0 0 / 0.25);
  --elev-highlight: inset 0 0 0 0 transparent;
  --glass: color-mix(in oklab, var(--color-paper) 78%, transparent); /* the top bar and the phone's tab bar only */
  --scrim: color-mix(in oklab, var(--color-layer) 28%, transparent);

  /* named layers (§3.3) */
  --z-sticky: 20;
  --z-top: 30;
  --z-bottom: 40;
  --z-panel: 50;
  --z-popover: 70;
  --z-toggletip: 80;
  --z-sheet: 85;
  --z-dialog: 90;
  --z-toast: 95;
  --z-skip: 100;

  /* density: compact on a desktop, comfortable on a phone — a theme switch, never another component */
  --row-h: 36px;
  --control-h: 32px;
  --cell-pad-block: 9px;
  --cell-pad-inline: 14px;

  /* the page */
  --gutter: 32px;
  --page-max: 1240px;
  --top-h: 60px;
}

@media (max-width: 719px) {
  :root {
    --row-h: 44px;
    --control-h: 44px;
    --gutter: 16px;
    --text-figure-l: 22px;
    --text-title-page: 30px;
  }
}

/* Reduced motion keeps every state change and drops the travel: rolls become swaps, springs become `ease`. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-roll: 0ms;
    --dur-draw: 0ms;
    --dur-slow: 120ms;
    --dur-base: 120ms;
    --dur-sheet: 120ms;
    --dur-drawer-in: 160ms;
    --dur-drawer-out: 160ms;
    --ease-spring: ease;
    --ease-spring-pop: ease;
  }
}
:root[data-motion="reduced"] {
  --dur-roll: 0ms;
  --dur-draw: 0ms;
  --dur-slow: 120ms;
  --dur-base: 120ms;
  --dur-sheet: 120ms;
  --dur-drawer-in: 160ms;
  --dur-drawer-out: 160ms;
  --ease-spring: ease;
  --ease-spring-pop: ease;
}

/* Dark stands on the brand's night (ADR 0148): the neutrals are `lobby-night`, turned toward the violet the room is lit
 * with, at its lightness, so the step from the lobby into a restaurant changes the light and not the room. The night
 * layer rises above that paper so the drawer floats; the strong tone is the lobby's orchid side; a shadow is the night
 * under the light, kept soft where a raised thing would otherwise smudge a page that is no longer black.
 * The reader's "dark", on the document only while it shows a page on the system (see the head of this file). The same
 * block stands twice more below — for "system" under `prefers-color-scheme: dark`, and for a region dark on its own —
 * declaration for declaration (tokens.test.ts). */
:root[data-theme="dark"]:has(.ds-page, .ds-acct, .ds-signin) {
  color-scheme: dark;
  --color-paper: #17133e;
  --color-code-ink: #000000;
  --color-code-paper: #ffffff;
  --color-raised: #1d1849;
  --color-wash: #231d54;
  --color-wash-2: #2f2767;
  --color-line: #2c255f;
  --color-line-2: #40367b;
  --color-control: #8c85c0;
  --color-thumb: var(--color-wash-2);
  --color-knob: var(--color-ink-2);
  --color-ink: #f3f5fc;
  --color-ink-2: #bbb9d5;
  --color-ink-3: #a5a1c7;
  --color-ink-4: #4c4389;
  --color-up: #3dd68c;
  --color-down: #ff7a6b;
  --color-attention: #f0b44c;
  --color-pending: var(--color-ink-2);
  --color-missing: var(--color-ink-3);
  /* a status's own hue, written out: a share of it over the night stays the night's purple, and a row or a chip would
   * stop reading as its status (each measured in tokens.test.ts, hue and contrast) */
  --color-up-wash: #143121;
  --color-down-wash: #441c1d;
  --color-attention-wash: #39280b;
  --color-layer: #241c5b;
  --color-layer-2: #322974;
  --color-tile: #3a2f86;
  --color-brand: var(--color-lobby-orchid-light);
  --color-on-brand: #141534;
  --color-brand-icon: var(--color-on-brand);
  --color-tint: #413688;
  --elev-ring: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent);
  --elev-raise: 0 0 0 1px color-mix(in oklab, var(--color-glow) 7%, transparent), 0 12px 32px -8px color-mix(in oklab, var(--color-lobby-deep) 20%, transparent);
  --elev-pop: 0 0 0 1px color-mix(in oklab, var(--color-glow) 10%, transparent), 0 24px 60px -12px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
  --elev-sheet: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent), 0 -24px 60px -20px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
  --elev-highlight: inset 0 1px 0 0 color-mix(in oklab, var(--color-on-layer) 6%, transparent); /* light from above, not a bigger shadow */
  --glass: color-mix(in oklab, var(--color-paper) 72%, transparent);
  --scrim: color-mix(in oklab, var(--color-lobby-deep) 60%, transparent);
}

/* The reader's "system" while the device prefers dark: the block above, declaration for declaration (tokens.test.ts). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"]:has(.ds-page, .ds-acct, .ds-signin) {
    color-scheme: dark;
    --color-paper: #17133e;
    --color-code-ink: #000000;
    --color-code-paper: #ffffff;
    --color-raised: #1d1849;
    --color-wash: #231d54;
    --color-wash-2: #2f2767;
    --color-line: #2c255f;
    --color-line-2: #40367b;
    --color-control: #8c85c0;
    --color-thumb: var(--color-wash-2);
    --color-knob: var(--color-ink-2);
    --color-ink: #f3f5fc;
    --color-ink-2: #bbb9d5;
    --color-ink-3: #a5a1c7;
    --color-ink-4: #4c4389;
    --color-up: #3dd68c;
    --color-down: #ff7a6b;
    --color-attention: #f0b44c;
    --color-pending: var(--color-ink-2);
    --color-missing: var(--color-ink-3);
    --color-up-wash: #143121;
    --color-down-wash: #441c1d;
    --color-attention-wash: #39280b;
    --color-layer: #241c5b;
    --color-layer-2: #322974;
    --color-tile: #3a2f86;
    --color-brand: var(--color-lobby-orchid-light);
    --color-on-brand: #141534;
    --color-brand-icon: var(--color-on-brand);
    --color-tint: #413688;
    --elev-ring: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent);
    --elev-raise: 0 0 0 1px color-mix(in oklab, var(--color-glow) 7%, transparent), 0 12px 32px -8px color-mix(in oklab, var(--color-lobby-deep) 20%, transparent);
    --elev-pop: 0 0 0 1px color-mix(in oklab, var(--color-glow) 10%, transparent), 0 24px 60px -12px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
    --elev-sheet: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent), 0 -24px 60px -20px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
    --elev-highlight: inset 0 1px 0 0 color-mix(in oklab, var(--color-on-layer) 6%, transparent);
    --glass: color-mix(in oklab, var(--color-paper) 72%, transparent);
    --scrim: color-mix(in oklab, var(--color-lobby-deep) 60%, transparent);
  }
}

/* A region dark on its own (the gallery's dark specimen): its own rule, out of the `:has()` list above, so a browser
 * without `:has()` still keeps it. */
[data-theme="dark"]:not(:root) {
  color-scheme: dark;
  --color-paper: #17133e;
  --color-code-ink: #000000;
  --color-code-paper: #ffffff;
  --color-raised: #1d1849;
  --color-wash: #231d54;
  --color-wash-2: #2f2767;
  --color-line: #2c255f;
  --color-line-2: #40367b;
  --color-control: #8c85c0;
  --color-thumb: var(--color-wash-2);
  --color-knob: var(--color-ink-2);
  --color-ink: #f3f5fc;
  --color-ink-2: #bbb9d5;
  --color-ink-3: #a5a1c7;
  --color-ink-4: #4c4389;
  --color-up: #3dd68c;
  --color-down: #ff7a6b;
  --color-attention: #f0b44c;
  --color-pending: var(--color-ink-2);
  --color-missing: var(--color-ink-3);
  --color-up-wash: #143121;
  --color-down-wash: #441c1d;
  --color-attention-wash: #39280b;
  --color-layer: #241c5b;
  --color-layer-2: #322974;
  --color-tile: #3a2f86;
  --color-brand: var(--color-lobby-orchid-light);
  --color-on-brand: #141534;
  --color-brand-icon: var(--color-on-brand);
  --color-tint: #413688;
  --elev-ring: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent);
  --elev-raise: 0 0 0 1px color-mix(in oklab, var(--color-glow) 7%, transparent), 0 12px 32px -8px color-mix(in oklab, var(--color-lobby-deep) 20%, transparent);
  --elev-pop: 0 0 0 1px color-mix(in oklab, var(--color-glow) 10%, transparent), 0 24px 60px -12px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
  --elev-sheet: 0 0 0 1px color-mix(in oklab, var(--color-glow) 8%, transparent), 0 -24px 60px -20px color-mix(in oklab, var(--color-lobby-deep) 70%, transparent);
  --elev-highlight: inset 0 1px 0 0 color-mix(in oklab, var(--color-on-layer) 6%, transparent);
  --glass: color-mix(in oklab, var(--color-paper) 72%, transparent);
  --scrim: color-mix(in oklab, var(--color-lobby-deep) 60%, transparent);
}

/* A region light on its own inside a dark document (the gallery's light specimen): every value the dark blocks change,
 * back to the light one (the `@theme` and `:root` values above; tokens.test.ts holds them equal). */
[data-theme="light"]:not(:root) {
  color-scheme: light;
  --color-paper: #ffffff;
  --color-code-ink: #000000;
  --color-code-paper: #ffffff;
  --color-raised: #ffffff;
  --color-wash: #f4f5fa;
  --color-wash-2: #e8e9ee;
  --color-line: #e8e9ee;
  --color-line-2: #dbdce1;
  --color-control: #808080;
  --color-thumb: var(--color-raised);
  --color-knob: var(--color-raised);
  --color-ink: #0e0f14;
  --color-ink-2: #50525a;
  --color-ink-3: #6b6d76;
  --color-ink-4: #b8b8b8;
  --color-up: #067a4a;
  --color-down: #c8261b;
  --color-attention: #975a00;
  --color-pending: var(--color-ink-2);
  --color-missing: var(--color-ink-3);
  --color-up-wash: color-mix(in oklab, var(--color-up) 9%, var(--color-paper));
  --color-down-wash: color-mix(in oklab, var(--color-down) 8%, var(--color-paper));
  --color-attention-wash: color-mix(in oklab, var(--color-attention) 10%, var(--color-paper));
  --color-layer: #141534;
  --color-layer-2: #212445;
  --color-tile: var(--color-layer);
  --color-brand: #27256c;
  --color-on-brand: var(--color-on-layer);
  --color-brand-icon: var(--color-glow);
  --color-tint: #dfe2fe;
  --elev-ring: 0 0 0 1px rgb(0 0 0 / 0.07);
  --elev-raise: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -8px rgb(0 0 0 / 0.1);
  --elev-pop: 0 0 0 1px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.04), 0 16px 40px -8px rgb(0 0 0 / 0.18);
  --elev-sheet: 0 -1px 0 rgb(0 0 0 / 0.05), 0 -24px 60px -20px rgb(0 0 0 / 0.25);
  --elev-highlight: inset 0 0 0 0 transparent;
  --glass: color-mix(in oklab, var(--color-paper) 78%, transparent);
  --scrim: color-mix(in oklab, var(--color-layer) 28%, transparent);
}

/* The lobby (ADR 0145, DESIGN.md §2.1): every screen before a restaurant opens — the sign-in, the second factor, a new
 * password, an invitation, the restaurant picker, and the person's own pages while no restaurant is open — is drawn on
 * the brand's night, in both themes and whatever the reader chose. The system's roles are re-tuned for it here, so every
 * component (a field, a button, a section card) draws on the night unchanged; every pair is measured in tokens.test.ts,
 * also on a card at the sky's brightest (`lobby-lit`). The derived tokens are restated, as in the dark block. */
.ds-lobby {
  color-scheme: dark;
  --color-paper: var(--color-lobby-night);
  --color-raised: #1b1d40;
  --color-wash: #1f2147;
  --color-wash-2: #2a2d57;
  --color-line: #2a2d57;
  --color-line-2: #3a3d6b;
  --color-control: #7a7ea8;
  --color-thumb: var(--color-wash-2);
  --color-knob: var(--color-ink-2);
  --color-ink: #f3f5fc;
  --color-ink-2: #b3b7c5;
  --color-ink-3: #9a9eb4;
  --color-ink-4: #3a3d6b;
  --color-up: #3dd68c;
  --color-down: #ff7a6b;
  --color-attention: #f0b44c;
  --color-pending: var(--color-ink-2);
  --color-missing: var(--color-ink-3);
  --color-up-wash: color-mix(in oklab, var(--color-up) 12%, var(--color-raised));
  --color-down-wash: color-mix(in oklab, var(--color-down) 12%, var(--color-raised));
  --color-attention-wash: color-mix(in oklab, var(--color-attention) 12%, var(--color-raised));
  --color-layer: var(--color-lobby-night);
  --color-layer-2: #212445;
  --color-tile: var(--color-layer);
  --color-brand: var(--color-glow);
  --color-on-brand: var(--color-lobby-night);
  --color-brand-icon: var(--color-lobby-night);
  --color-tint: #37395e;
  --elev-ring: 0 0 0 1px color-mix(in oklab, var(--color-glow) 14%, transparent);
  --elev-raise: 0 0 0 1px color-mix(in oklab, var(--color-glow) 12%, transparent), 0 24px 60px -24px rgb(0 0 0 / 0.6);
  --elev-pop: 0 0 0 1px color-mix(in oklab, var(--color-glow) 16%, transparent), 0 24px 70px -20px rgb(0 0 0 / 0.7);
  --elev-sheet: 0 -1px 0 color-mix(in oklab, var(--color-glow) 12%, transparent), 0 -24px 60px -20px rgb(0 0 0 / 0.6);
  --elev-highlight: inset 0 1px 0 color-mix(in oklab, var(--color-on-layer) 7%, transparent);
  --glass: color-mix(in oklab, var(--color-raised) 78%, transparent);
  --scrim: color-mix(in oklab, var(--color-lobby-deep) 60%, transparent);
}
/* The lobby's document: the night under it, so a scroll's overshoot and the space around the column stay night. */
:root:has(.ds-lobby) {
  color-scheme: dark;
  background-color: var(--color-lobby-deep);
}

/* A theme or hue change cross-fades every registered role (600 ms), unless the person asked for less motion — or the
 * theme switch is playing its circular reveal (`data-theme-reveal`, set for the length of it): there the new theme is
 * drawn at once, inside the circle. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme-reveal] {
    transition: none;
  }
  :root,
  [data-theme] {
    transition:
      --color-paper 600ms var(--ease-ds-out),
      --color-wash 600ms var(--ease-ds-out),
      --color-wash-2 600ms var(--ease-ds-out),
      --color-line 600ms var(--ease-ds-out),
      --color-line-2 600ms var(--ease-ds-out),
      --color-ink 600ms var(--ease-ds-out),
      --color-ink-2 600ms var(--ease-ds-out),
      --color-ink-3 600ms var(--ease-ds-out),
      --color-layer 600ms var(--ease-ds-out),
      --color-layer-2 600ms var(--ease-ds-out),
      --color-on-layer 600ms var(--ease-ds-out),
      --color-on-layer-2 600ms var(--ease-ds-out),
      --color-glow 600ms var(--ease-ds-out),
      --color-glow-2 600ms var(--ease-ds-out),
      --color-brand 600ms var(--ease-ds-out),
      --color-on-brand 600ms var(--ease-ds-out),
      --color-tint 600ms var(--ease-ds-out);
  }
}

/* Depth and layers as utilities, reading the variables above so dark mode and density reach them. */