/* Generated by scripts/gen-tokens.mjs from design/tokens.mjs. Edit that, then run `npm run tokens`. */

:root {
  /* ---------- colour, light ---------- */
  --bg: #FBFCFA;
  --side: #F4F7F3;
  --raise: #FEFEFD;
  --sunk: #EBEFE9;
  --hover: #F0F3EE;
  --sel: #E3ECE6;
  --hair: #E0E5DE;
  --edge: #C8CFC6;
  --edge-strong: #858E87;
  --ink: #121A15;
  --ink-2: #3B463F;
  --ink-3: #5A665E;
  --ink-4: #8E988F;
  --saguaro: #145E3F;
  --saguaro-hi: #0B4A31;
  --saguaro-text: #145E3F;
  --on-saguaro: #F8FBF9;
  --amber: #C27A00;
  --amber-text: #7D4A07;
  --amber-tint: #FCF0D6;
  --on-amber: #1C1200;
  --red: #D0382F;
  --red-text: #A81F1C;
  --red-tint: #FCE9E5;
  --focus: #145E3F;
  --inverse: #121A15;
  --on-inverse: #EEF3EF;
  --scrim: rgb(20 26 22 / 0.22);
  --map-land: #EEF1EB;
  --map-area: #E5EAE3;
  --map-road: #FBFCFA;
  --map-road-casing: #D9DFD6;
  --map-arterial: #FFFFFF;
  --map-label: #5A665E;
  --shadow-pop: 0 0 0 1px var(--edge), 0 12px 32px -10px rgb(14 24 18 / 0.24);
  --chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20stroke%3D'%235A665E'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm3.5%206%204.5%204.5L12.5%206'%2F%3E%3C%2Fsvg%3E");

  /* ---------- type: one family, three weights; the office scale (size, line height, tracking) ---------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  --fs-h1: 24px; --lh-h1: 30px; --ls-h1: -0.015em;
  --fs-h2: 20px; --lh-h2: 26px; --ls-h2: -0.01em;
  --fs-h3: 16px; --lh-h3: 22px; --ls-h3: -0.005em;
  --fs-body: 15px; --lh-body: 21px;
  --fs-sec: 14px; --lh-sec: 20px;
  --fs-meta: 13px; --lh-meta: 18px;
  --fs-mono: 13px; --lh-mono: 18px;
  --fs-display: 24px; --lh-display: 30px; --ls-display: -0.015em;
  --fs-amount: 44px; --lh-amount: 48px; --ls-amount: -0.02em;

  /* ---------- a drawing or signature is a document: it sits on paper in either mode ---------- */
  --paper: #FCFCFB; --paper-line: #C9CDD2;

  /* ---------- space, a 4px grid ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --gutter: 24px;

  /* ---------- size ---------- */
  --h-row: 44px; --h-row-dense: 36px; --h-nav: 32px; --h-control: 36px; --h-control-sm: 32px; --h-control-xs: 28px;
  --h-bar: 48px; --w-side: 224px; --icon: 16px; --icon-stroke: 1.5;

  /* ---------- radius by role ---------- */
  --r-0: 0; --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 120ms; --dur-state: 160ms; --dur-pop: 180ms; --dur-sheet: 320ms; --skel-delay: 150ms;

  /* ---------- the old names, as aliases of the tokens above, so a screen not yet rebuilt still resolves.
     No new rule uses these. A screen lane deletes the ones its last caller stops using. ---------- */
  --surface: var(--bg); --line: var(--hair); --line-strong: var(--edge-strong); --btn-line: var(--edge);
  --sunk-2: var(--hover); --row-hover: var(--hover); --veil: var(--scrim);
  --accent: var(--saguaro); --accent-strong: var(--saguaro); --accent-pressed: var(--saguaro-hi); --accent-press: var(--saguaro-hi); --on-accent: var(--on-saguaro);
  --chrome: var(--saguaro); --on-chrome: var(--on-saguaro); --chrome-ink-2: color-mix(in oklch, var(--on-saguaro) 80%, var(--saguaro)); --chrome-accent: var(--on-saguaro);
  --selected: var(--sel); --on-selected: var(--ink);
  --ok: var(--saguaro-text); --ok-bg: var(--sel); --ok-line: var(--edge);
  --warn: var(--amber-text); --warn-bg: var(--amber-tint); --warn-line: var(--amber);
  --bad: var(--red-text); --bad-bg: var(--red-tint);
  --info: var(--ink-2); --info-bg: var(--sunk); --info-line: var(--hair);
  --r-sm: var(--r-2); --r-md: var(--r-2); --r-lg: var(--r-3);
  --fs-xs: var(--fs-meta); --fs-s: var(--fs-meta); --fs-sm: var(--fs-sec); --fs-b: var(--fs-body); --fs-m: var(--fs-h3); --fs-l: var(--fs-h2); --fs-xl: var(--fs-h2); --fs-xxl: var(--fs-h1);
  --t-body: var(--fs-body); --t-body-lh: var(--lh-body); --t-small: var(--fs-sec); --t-small-lh: var(--lh-sec); --t-display: var(--fs-h1); --t-display-lh: var(--lh-h1);
  --w-semi: var(--w-semibold); --w-bold: var(--w-semibold); --w-heavy: var(--w-semibold); --tight: 0;
  --sans: var(--font-sans); --mono: var(--font-mono);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: #0D120F;
    --side: #090D0A;
    --raise: #1A211D;
    --sunk: #151B17;
    --hover: #141A16;
    --sel: #1B2A21;
    --hair: #222B25;
    --edge: #323D36;
    --edge-strong: #66736A;
    --ink: #DDE5DF;
    --ink-2: #AEBBB3;
    --ink-3: #86938A;
    --ink-4: #5B665F;
    --saguaro: #4AA076;
    --saguaro-hi: #5BB087;
    --saguaro-text: #72CB9E;
    --on-saguaro: #08110C;
    --amber: #E3A12E;
    --amber-text: #EDBB64;
    --amber-tint: #2A2009;
    --on-amber: #1A1204;
    --red: #F0675C;
    --red-text: #FF8F82;
    --red-tint: #301714;
    --focus: #72CB9E;
    --inverse: #26302A;
    --on-inverse: #DDE5DF;
    --scrim: rgb(0 0 0 / 0.56);
    --map-land: #121A15;
    --map-area: #0F1612;
    --map-road: #1C2620;
    --map-road-casing: #0D120F;
    --map-arterial: #26332B;
    --map-label: #86938A;
    --shadow-pop: 0 0 0 1px var(--edge);
    --chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20stroke%3D'%2386938A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm3.5%206%204.5%204.5L12.5%206'%2F%3E%3C%2Fsvg%3E");
    color-scheme: dark;
  }
}

:root[data-scheme="dark"] {
  --bg: #0D120F;
  --side: #090D0A;
  --raise: #1A211D;
  --sunk: #151B17;
  --hover: #141A16;
  --sel: #1B2A21;
  --hair: #222B25;
  --edge: #323D36;
  --edge-strong: #66736A;
  --ink: #DDE5DF;
  --ink-2: #AEBBB3;
  --ink-3: #86938A;
  --ink-4: #5B665F;
  --saguaro: #4AA076;
  --saguaro-hi: #5BB087;
  --saguaro-text: #72CB9E;
  --on-saguaro: #08110C;
  --amber: #E3A12E;
  --amber-text: #EDBB64;
  --amber-tint: #2A2009;
  --on-amber: #1A1204;
  --red: #F0675C;
  --red-text: #FF8F82;
  --red-tint: #301714;
  --focus: #72CB9E;
  --inverse: #26302A;
  --on-inverse: #DDE5DF;
  --scrim: rgb(0 0 0 / 0.56);
  --map-land: #121A15;
  --map-area: #0F1612;
  --map-road: #1C2620;
  --map-road-casing: #0D120F;
  --map-arterial: #26332B;
  --map-label: #86938A;
  --shadow-pop: 0 0 0 1px var(--edge);
  --chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20stroke%3D'%2386938A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm3.5%206%204.5%204.5L12.5%206'%2F%3E%3C%2Fsvg%3E");
  color-scheme: dark;
}

@media print {
  :root {
    --bg: #FBFCFA !important;
    --side: #F4F7F3 !important;
    --raise: #FEFEFD !important;
    --sunk: #EBEFE9 !important;
    --hover: #F0F3EE !important;
    --sel: #E3ECE6 !important;
    --hair: #E0E5DE !important;
    --edge: #C8CFC6 !important;
    --edge-strong: #858E87 !important;
    --ink: #121A15 !important;
    --ink-2: #3B463F !important;
    --ink-3: #5A665E !important;
    --ink-4: #8E988F !important;
    --saguaro: #145E3F !important;
    --saguaro-hi: #0B4A31 !important;
    --saguaro-text: #145E3F !important;
    --on-saguaro: #F8FBF9 !important;
    --amber: #C27A00 !important;
    --amber-text: #7D4A07 !important;
    --amber-tint: #FCF0D6 !important;
    --on-amber: #1C1200 !important;
    --red: #D0382F !important;
    --red-text: #A81F1C !important;
    --red-tint: #FCE9E5 !important;
    --focus: #145E3F !important;
    --inverse: #121A15 !important;
    --on-inverse: #EEF3EF !important;
    --scrim: rgb(20 26 22 / 0.22) !important;
    --map-land: #EEF1EB !important;
    --map-area: #E5EAE3 !important;
    --map-road: #FBFCFA !important;
    --map-road-casing: #D9DFD6 !important;
    --map-arterial: #FFFFFF !important;
    --map-label: #5A665E !important;
    color-scheme: light !important;
  }
}