/*
 * The xyzbid design system's tokens (AD-6), from tokens.json on the Confluence
 * page "xyzbid design system (draft)", 30 Oct 2026. The one place colours are
 * written as hex: pages and components use these names only.
 *
 * Light by default; dark when the device asks for it, unless the pilot chose
 * light; dark when the pilot chose it. The choice is data-theme on <html>,
 * set by theme.js before anything is drawn.
 */
/* Inter 4.1, the variable font, served by xyzBid (SIL Open Font License; fonts/Inter-LICENSE.txt). */
@font-face {
  font-family: "Inter";
  src: url("/xb/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-sunken: #edf1f4;
  --line: #dce2e8;
  --line-strong: #758497;
  --ink: #0b1f33;
  --ink-muted: #43546a;
  --ink-subtle: #5b6b7e;
  --accent: #1e66d0;
  --accent-hover: #1858c0;
  --accent-soft: #edf4fe;
  --on-accent: #ffffff;
  --status-success: #075e4d;
  --status-success-soft: #e3f4ee;
  --status-attention: #9a3f06;
  --status-attention-soft: #fdeee2;
  --status-pending: #6b3fb5;
  --status-pending-soft: #f0eafb;
  --status-locked: #334155;
  --status-locked-soft: #e8ecf1;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --focus-ring: var(--accent);
  --link: var(--accent);

  /* Inter for everything, served by xyzBid; the stack until it loads. */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type: size / line height, weight (design system, Type). One step denser
     than the draft (Alex, 3 Nov 2026): more on a tablet screen at once. */
  --title-l: 700 24px/30px var(--font-sans);
  --title: 700 20px/26px var(--font-sans);
  --heading: 600 16px/22px var(--font-sans);
  --body: 400 15px/22px var(--font-sans);
  --body-strong: 600 15px/22px var(--font-sans);
  --label: 600 13px/18px var(--font-sans);
  --small: 400 13px/18px var(--font-sans);
  --caption: 500 12px/16px var(--font-sans);
  /* Form fields stay at 16px: Safari on iOS and iPadOS zooms into anything smaller. */
  --field: 400 16px/24px var(--font-sans);

  /* Space on a 4px base; 16 is the phone gutter, 24 tablet and desktop. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-pop: 0 8px 24px rgb(11 31 51 / 0.14);
  --touch: 44px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1622;
    --surface: #122131;
    --surface-sunken: #0f1c29;
    --line: #2a3b4d;
    --line-strong: #6b7c8f;
    --ink: #e8eef4;
    --ink-muted: #b4c0cd;
    --ink-subtle: #93a3b4;
    --accent: #74adff;
    --accent-hover: #98c2ff;
    --accent-soft: #13294a;
    --on-accent: #04172f;
    --status-success: #7be0be;
    --status-success-soft: #0e3a30;
    --status-attention: #ffb37a;
    --status-attention-soft: #3d2410;
    --status-pending: #c9b2ff;
    --status-pending-soft: #2a1f4a;
    --status-locked: #cbd5e1;
    --status-locked-soft: #243344;
    --danger: #ff9c8f;
    --danger-soft: #3e1714;
    --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1622;
  --surface: #122131;
  --surface-sunken: #0f1c29;
  --line: #2a3b4d;
  --line-strong: #6b7c8f;
  --ink: #e8eef4;
  --ink-muted: #b4c0cd;
  --ink-subtle: #93a3b4;
  --accent: #74adff;
  --accent-hover: #98c2ff;
  --accent-soft: #13294a;
  --on-accent: #04172f;
  --status-success: #7be0be;
  --status-success-soft: #0e3a30;
  --status-attention: #ffb37a;
  --status-attention-soft: #3d2410;
  --status-pending: #c9b2ff;
  --status-pending-soft: #2a1f4a;
  --status-locked: #cbd5e1;
  --status-locked-soft: #243344;
  --danger: #ff9c8f;
  --danger-soft: #3e1714;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}