/* Zanoshky Standard tokens for the web. Generated by build.py from tokens.json: edit that, then run it.
   Light by default; the phone's dark setting gives Black, as the approved mockup pages do;
   data-look on <html> picks one: light, dark, black, or auto (follow the phone). */
:root {
  color-scheme: light dark;
  --zs-fill: #004cc0;
  --zs-on-fill: #ffffff;
  --zs-glow: #0068ff;
  --zs-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zs-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zs-fs: 1;
  --zs-type-screen-title: calc(27px * var(--zs-fs));
  --zs-type-app-bar-title: calc(22px * var(--zs-fs));
  --zs-type-pro-headline: calc(22px * var(--zs-fs));
  --zs-type-sheet-title: calc(18px * var(--zs-fs));
  --zs-type-sheet-title-big: calc(22px * var(--zs-fs));
  --zs-type-section-label: calc(13px * var(--zs-fs));
  --zs-type-panel-value: calc(19px * var(--zs-fs));
  --zs-type-number: calc(20px * var(--zs-fs));
  --zs-type-version: calc(17px * var(--zs-fs));
  --zs-type-body: calc(15px * var(--zs-fs));
  --zs-type-key: calc(15px * var(--zs-fs));
  --zs-type-key-main: calc(16px * var(--zs-fs));
  --zs-type-header-key: calc(13px * var(--zs-fs));
  --zs-type-item-name: calc(15px * var(--zs-fs));
  --zs-type-feature-name: calc(15px * var(--zs-fs));
  --zs-type-pitch: calc(14.5px * var(--zs-fs));
  --zs-type-hint: calc(14px * var(--zs-fs));
  --zs-type-small: calc(13.5px * var(--zs-fs));
  --zs-type-feature-line: calc(13px * var(--zs-fs));
  --zs-type-nav-label: calc(12.5px * var(--zs-fs));
  --zs-type-chip: calc(12.5px * var(--zs-fs));
  --zs-type-meta: calc(12.5px * var(--zs-fs));
  --zs-type-axis: calc(12px * var(--zs-fs));
  --zs-r-plate: 16px;
  --zs-r-key: 14px;
  --zs-r-key-focus-inner: 10px;
  --zs-r-header-key: 12px;
  --zs-r-icon-button: 12px;
  --zs-r-row: 12px;
  --zs-r-note: 12px;
  --zs-r-theme-tile: 14px;
  --zs-r-tile-preview: 9px;
  --zs-r-feature-tile: 10px;
  --zs-r-list-icon: 10px;
  --zs-r-sheet-top: 24px;
  --zs-r-grab: 4px;
  --zs-r-pill: 999px;
  --zs-r-chip: 999px;
  --zs-r-switch: 999px;
  --zs-key-h: 52px;
  --zs-header-key-h: 48px;
  --zs-touch: 48px;
  --zs-row-h: 52px;
  --zs-item-h: 56px;
  --zs-nav-item-h: 56px;
  --zs-pill-w: 60px;
  --zs-pill-h: 32px;
  --zs-pro-row-h: 60px;
  --zs-content-max: 1100px;
  --zs-press-ms: 70ms;
  --zs-release-ms: 140ms;
  --zs-look-ms: 250ms;
  --zs-pill-ms: 200ms;
  --zs-s0: 2px;
  --zs-s1: 4px;
  --zs-s2: 6px;
  --zs-s3: 8px;
  --zs-s4: 10px;
  --zs-s5: 12px;
  --zs-s6: 14px;
  --zs-s7: 16px;
  --zs-s8: 18px;
  --zs-s9: 22px;
  --zs-s10: 26px;
  --zs-s11: 28px;
  --zs-s12: 32px;
  --zs-s13: 48px;
  --zs-screen-side: 18px;
  --zs-screen-top: 18px;
  --zs-screen-bottom: 28px;
  --zs-tv-safe-x: 48px;
  --zs-tv-safe-y: 27px;
  --zs-tv-rail-w: 96px;
  --zs-tv-sheet-w: 420px;
  --zs-tv-col-gap: 32px;
  --zs-focus-ring: 2px;
  --zs-focus-offset: 3px;
  --zs-focus-halo: 7px;
  --zs-focus-lift: 1.04;
  --zs-focus-ms: 120ms;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
@media (min-width: 840px) { :root { --zs-screen-side: 48px; --zs-screen-top: 22px; --zs-screen-bottom: 40px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-look]), :root[data-look="auto"] {
    --zs-ground: #000000;
    --zs-plate: #0d0d10;
    --zs-well: #16171b;
    --zs-line: #24252b;
    --zs-edge: #646771;
    --zs-bevel: #34363e;
    --zs-text: #ffffff;
    --zs-soft: #b6b8c0;
    --zs-blue: #7aaeff;
    --zs-on-blue: #04132e;
    --zs-ok: #6fdc9b;
    --zs-warn: #f2c06b;
    --zs-bad: #ff9d97;
    --zs-scrim: rgba(0,0,0,.6);
    --zs-chosen: #0a2350;
    --zs-on-chosen: #ffffff;
    --zs-risky-fill: #2a0d10;
    --zs-risky-text: #ffb4ae;
    --zs-risky-line: #ff5a4f;
    --zs-live-dot: #3ecf8e;
  }
}
:root[data-look="light"] {
  color-scheme: light;
  --zs-ground: #f6f7f9;
  --zs-plate: #ffffff;
  --zs-well: #eceef2;
  --zs-line: #dfe2e8;
  --zs-edge: #7b808c;
  --zs-bevel: #ffffff;
  --zs-text: #121418;
  --zs-soft: #3d414a;
  --zs-blue: #0a45ad;
  --zs-on-blue: #ffffff;
  --zs-ok: #0a5530;
  --zs-warn: #5c3a00;
  --zs-bad: #931313;
  --zs-scrim: rgba(18,20,24,.38);
  --zs-chosen: #e8f0ff;
  --zs-on-chosen: #0a3f9e;
  --zs-risky-fill: #fde8e7;
  --zs-risky-text: #8a1010;
  --zs-risky-line: #d42a20;
  --zs-live-dot: #1a7f4b;
}
:root[data-look="dark"] {
  color-scheme: dark;
  --zs-ground: #111215;
  --zs-plate: #18191d;
  --zs-well: #1f2126;
  --zs-line: #2a2c33;
  --zs-edge: #6c707b;
  --zs-bevel: #3a3d46;
  --zs-text: #eceef2;
  --zs-soft: #b5b8c1;
  --zs-blue: #86b6ff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.55);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
:root[data-look="black"] {
  color-scheme: dark;
  --zs-ground: #000000;
  --zs-plate: #0d0d10;
  --zs-well: #16171b;
  --zs-line: #24252b;
  --zs-edge: #646771;
  --zs-bevel: #34363e;
  --zs-text: #ffffff;
  --zs-soft: #b6b8c0;
  --zs-blue: #7aaeff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.6);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
@media (prefers-reduced-motion: reduce) { :root { --zs-press-ms: 0ms; --zs-release-ms: 0ms; --zs-look-ms: 0ms; --zs-pill-ms: 0ms; } }
/* TV: set data-form="tv" on <html>. Screen sides move to the TV safe edges; Dark is the default look. */
:root[data-form="tv"] {
  --zs-screen-side: 48px;
  --zs-screen-top: 27px;
  --zs-screen-bottom: 27px;
}
:root[data-form="tv"]:not([data-look]) {
  color-scheme: dark;
  --zs-ground: #111215;
  --zs-plate: #18191d;
  --zs-well: #1f2126;
  --zs-line: #2a2c33;
  --zs-edge: #6c707b;
  --zs-bevel: #3a3d46;
  --zs-text: #eceef2;
  --zs-soft: #b5b8c1;
  --zs-blue: #86b6ff;
  --zs-on-blue: #04132e;
  --zs-ok: #6fdc9b;
  --zs-warn: #f2c06b;
  --zs-bad: #ff9d97;
  --zs-scrim: rgba(0,0,0,.55);
  --zs-chosen: #0a2350;
  --zs-on-chosen: #ffffff;
  --zs-risky-fill: #2a0d10;
  --zs-risky-text: #ffb4ae;
  --zs-risky-line: #ff5a4f;
  --zs-live-dot: #3ecf8e;
}
@media (prefers-reduced-motion: reduce) { :root { --zs-focus-ms: 0ms; --zs-focus-lift: 1; } }