:root {
  --font-ui: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader Variable", Georgia, serif;

  --paper: #f3f4f6;
  --surface: #ffffff;
  --surface-sunk: #eef0f3;
  --line: #e3e6ea;
  --line-strong: #cfd4db;
  --ink: #161b24;
  --ink-2: #394150;
  --muted: #5f6673;
  --faint: #9ca3af;

  --rail: #161b24;
  --rail-2: #292e38;
  --rail-ink: #f5f6f8;
  --rail-muted: #8d94a0;

  /* The rail's ink carries the plain actions; colour is kept for the states of a booking. */
  --accent: #161b24;
  --accent-ink: #ffffff;
  --accent-soft: #eef0f3;
  --accent-line: #cfd4db;
  --focus: #2d6ac1;
  /* The Bientenu terracotta: the logo only. */
  --brand: #b4532a;

  /* One lightness for every state, so the blocks sit together and white reads on each. */
  --on-status: #ffffff;
  --pending: #cb7300;
  --pending-soft: #fbefdc;
  --pending-line: #eec48a;
  --pending-ink: #9a5700;
  --confirmed: #318850;
  --confirmed-soft: #e3f1e8;
  --confirmed-line: #9fcdb0;
  --seated: #2d6ac1;
  --seated-soft: #e2ebf8;
  --seated-line: #9dbbe6;
  --noshow: #c43f3e;
  --noshow-soft: #f8e3e2;
  --noshow-ink: #962c2c;
  /* The tables of the booking picked in the list: no table on the plan is red, so it stands out alone. */
  --pick: var(--noshow);
  --waitlist: #7550c2;
  --waitlist-soft: #ece6f8;
  --waitlist-line: #bfaee6;
  /* Over: a grey that steps back. */
  --done: #e3e6ea;
  --star-fill: #f2b544;
  /* The lunch series in charts, beside --accent for the evening. */
  --midi: #a4abb6;

  --status-pending-text: var(--pending);
  --status-confirmed-text: var(--confirmed);
  --status-seated-text: var(--seated);
  --status-noshow-text: var(--noshow);
  --status-waitlist-text: var(--waitlist);
  --rail-main: var(--line-strong);
  --table-fill: var(--surface);
  --table-line: var(--line-strong);
  --table-chair: var(--surface-sunk);
  --table-ink: var(--ink-2);
  --table-off-fill: var(--surface-sunk);
  /* Grey marks in charts (other weeks, walk-ins), beside the main series. */
  --chart-quiet: var(--line-strong);

  --warn: var(--pending-ink);
  --full: var(--noshow);

  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 16px;
  --shadow-1: 0 1px 2px rgb(22 27 36 / 0.06), 0 1px 1px rgb(22 27 36 / 0.04);
  --shadow-2: 0 8px 24px rgb(22 27 36 / 0.08), 0 2px 6px rgb(22 27 36 / 0.05);
  --shadow-3: 0 24px 60px rgb(22 27 36 / 0.18), 0 6px 18px rgb(22 27 36 / 0.08);

  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --rail-w: 88px;
  /* One side margin for titles and content on every screen, one width for every master list. */
  --page-x: 28px;
  --list-w: clamp(340px, 30vw, 440px);
  --service-list-w: 260px;

  --accent-hover: #1f2937;
  --confirmed-on-dark: #86efac;
  --floor-window: #9fb7c6;
  --floor-outdoor: #f7faf6;
  --floor-outdoor-line: #d6dccb;
  --scrim: rgb(17 24 39 / 0.38);
  --scrim-side: rgb(17 24 39 / 0.25);
  --shadow-float: 0 10px 26px rgb(17 24 39 / 0.28);
  --shadow-side: -12px 0 32px rgb(17 24 39 / 0.18);
  --shadow-sheet: 0 -12px 32px rgb(17 24 39 / 0.18);
  --shadow-knob: 0 1px 3px rgb(17 24 39 / 0.25);
  --shadow-drag: 0 12px 28px rgb(17 24 39 / 0.22);
  --shadow-table: 0 1px 2px rgb(22 27 36 / 0.12);
  --shadow-illustration: 0 10px 30px rgb(0 0 0 / 0.25);
  --on-dark-line: rgb(255 255 255 / 0.08);
  --on-dark-hover: rgb(255 255 255 / 0.16);
  --on-dark-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
  --on-status-muted: rgb(255 255 255 / 0.75);
  --on-status-line: rgb(255 255 255 / 0.25);
  --tint: rgb(0 0 0 / 0.12);
  --on-color-ink-2: rgb(255 255 255 / 0.92);
  --on-color-muted: rgb(255 255 255 / 0.78);
  --on-color-faint: rgb(255 255 255 / 0.6);
  --on-color-line: rgb(255 255 255 / 0.3);
  --on-color-line-strong: rgb(255 255 255 / 0.5);
  --on-color-tint: rgb(0 0 0 / 0.12);
  --on-color-tint-strong: rgb(0 0 0 / 0.16);

  /* Stacking: menus, toasts, dialogs, drag. Inside a component, values under 10 are its own. */
  --z-menu: 20;
  --z-menu-top: 21;
  --z-toast: 30;
  --z-dialog: 60;
  --z-dialog-top: 61;
  --z-dialog-over: 70;
  --z-drag: 200;
  --z-top: 1000;
  --overlay-foot-h: 80px;
}
@media (max-width: 1180px) {
  :root {
    --page-x: 20px;
  }
}
@media (max-width: 640px) {
  :root {
    --page-x: 16px;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1218; --surface: #181c24; --surface-sunk: #12151b;
  --line: #262b35; --line-strong: #353b47;
  --ink: #e8eaee; --ink-2: #c3c8d1; --muted: #949ba7; --faint: #6b7280;
  --rail: #0a0d12; --rail-2: #1c212a; --rail-ink: #f5f6f8; --rail-muted: #8d94a0;
  --accent: #e8eaee; --accent-ink: #161b24; --accent-soft: #232833; --accent-line: #3a404c;
  --accent-hover: #d1d5db; --focus: #5b8fe0;
  --pending-soft: #3a2a12; --pending-line: #7a5420; --pending-ink: #f0b35c;
  --confirmed-soft: #15291d; --confirmed-line: #2f6243;
  --seated-soft: #16233a; --seated-line: #34558a;
  --noshow-soft: #3a1a1a; --noshow-ink: #f08a89;
  --waitlist-soft: #241b3a; --waitlist-line: #4f3d80;
  --done: #2a2f39; --midi: #5b6270;
  --floor-window: #4a6273; --floor-outdoor: #18201a; --floor-outdoor-line: #2f3a2c;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 8px 24px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .3);
  --shadow-3: 0 24px 60px rgb(0 0 0 / .6); --shadow-table: 0 1px 2px rgb(0 0 0 / .5);
  --scrim: rgb(0 0 0 / .55); --scrim-side: rgb(0 0 0 / .45);
  --status-pending-text: #f0b35c; --status-confirmed-text: #6fcf8f; --status-seated-text: #8fb3ec;
  --status-noshow-text: #f08a89; --status-waitlist-text: #b9a3ec; --rail-main: #cfd4db;
  --table-fill: #323946; --table-line: #6b7484; --table-chair: #59616f; --table-ink: #e8eaee; --table-off-fill: #262b35;
  --chart-quiet: #7b8494;
}