/*
 * The desk: the operator tools' one visual system.
 *
 * Four tools (/vendor, /door, /console, /admin) are worked in for hours, so
 * they are drawn as a quiet desk rather than a poster: one ground, one sans,
 * a fixed type scale, neutrals, and the accent kept for what you can press or
 * what is chosen.
 *
 * Since Nov 2 2026 the desk is drawn in the app's own materials, so a vendor
 * or an operator moving between the phone and the browser is in one product:
 * the app's font (Plus Jakarta Sans), its greys (frontend palette.ts), filled
 * cards rather than outlined ones, pill buttons, and no rules between rows.
 * Groups are told apart by fill and space, the way the app's sheets are. The loud thing on each tool is the live object it exists to
 * set (a place's status, the door's verdict, an alert), painted as a sign
 * (desk/sign.css). Nothing else competes with it.
 *
 * lib/theme.css still owns the accent ramps (--g-*) and the map's state
 * colours (--s-*), because the Appearance picker and the JS write against
 * them. Everything else a page draws with reads these tokens.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/vendor/plus-jakarta-sans-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/vendor/big-shoulders-display-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Type: one family, fixed steps (1.125 to 1.2 apart), never fluid. */
  --f-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-sign: 'Big Shoulders Display', 'Plus Jakarta Sans', sans-serif;
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-40: 2.5rem;

  /* Space: a 4px grid. Groups sit tight; sections are separated generously. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* The app's radii: a field or a small chip at 10, a card at 16, a sheet at 20. */
  --r-1: 8px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 20px;
  --r-pill: 999px;

  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-move: cubic-bezier(0.77, 0, 0.175, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --side-w: 248px;
  /* Wide enough that a desk monitor is filled rather than framed in black;
     past this a line of text or a row of tiles stops reading as one. */
  --page-max: 1560px;
  --ctl-h: 42px;
  --ctl-h-sm: 34px;
}

/* ── Light: the default when nothing says otherwise ────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f7;
  --raise: #ffffff;
  --raise-2: #f2f2f2;
  --sunk: #efefef;
  --line: rgba(0, 0, 0, 0.06);
  --line-2: #d8d8de;
  --ink: #16171a;
  --ink-2: #55565b;
  --ink-3: #6f7075;
  --ink-4: #9a9ba0;
  --accent: var(--g-600);
  --accent-hover: var(--g-700);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--g-500) 12%, transparent);
  --accent-text: var(--g-700);
  --danger: #d92d20;
  --danger-soft: rgba(217, 45, 32, 0.1);
  --warn: #b25e09;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --ok: #118a4f;
  --ok-soft: rgba(17, 138, 79, 0.12);
  --focus: color-mix(in srgb, var(--g-500) 55%, transparent);
  --pop-shadow: 0 1px 2px rgba(17, 19, 24, 0.06), 0 12px 32px -8px rgba(17, 19, 24, 0.18);
  --skel: #e9e9ec;
  --topo-filter: invert(1);
  --topo-op: 0.22;
  --skel-2: #f3f3f5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131315;
    --raise: #1f1f22;
    --raise-2: #2c2c30;
    --sunk: #18181b;
    --line: rgba(255, 255, 255, 0.06);
    --line-2: #3a3a3c;
    --ink: #ffffff;
    --ink-2: #aeaeb2;
    --ink-3: #8e8e93;
    --ink-4: #636366;
    --accent: var(--g-500);
    --accent-hover: var(--g-400);
    --accent-ink: #ffffff;
    --accent-soft: color-mix(in srgb, var(--g-500) 16%, transparent);
    --accent-text: var(--g-400);
    --danger: #f0584c;
    --danger-soft: rgba(240, 88, 76, 0.14);
    --warn: #f0b429;
    --warn-soft: rgba(240, 180, 41, 0.14);
    --ok: #3ecf8e;
    --ok-soft: rgba(62, 207, 142, 0.14);
    --focus: color-mix(in srgb, var(--g-400) 60%, transparent);
    --pop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
    --skel: #2c2c2e;
    --topo-filter: none;
    --topo-op: 0.5;
    --skel-2: #3a3a3c;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131315;
  --raise: #1f1f22;
  --raise-2: #2c2c30;
  --sunk: #18181b;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: #3a3a3c;
  --ink: #ffffff;
  --ink-2: #aeaeb2;
  --ink-3: #8e8e93;
  --ink-4: #636366;
  --accent: var(--g-500);
  --accent-hover: var(--g-400);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--g-500) 16%, transparent);
  --accent-text: var(--g-400);
  --danger: #f0584c;
  --danger-soft: rgba(240, 88, 76, 0.14);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, 0.14);
  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.14);
  --focus: color-mix(in srgb, var(--g-400) 60%, transparent);
  --pop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --skel: #2c2c2e;
  --topo-filter: none;
  --topo-op: 0.5;
  --skel-2: #3a3a3c;
}

/*
 * The map's own state colours, as the sign paints them. A vendor reads these
 * on the map every day, so they mean the same thing here and nowhere else:
 * the accent never borrows them and they never decorate.
 */
:root {
  --st-open: var(--s-open, #1fa566);
  --st-busy: var(--s-busy, #f0a500);
  --st-sold: var(--s-sold, #e5484d);
  --st-closed: var(--s-closed, #6b6f78);
  --v-open: var(--st-open);
  --v-busy: var(--st-busy);
  --v-sold: var(--st-sold);
  --v-closed: var(--st-closed);
  --sign-cream: #f7f1e1;
  --sign-ink: #16171b;
}