/* QuietWall design tokens -- generated from design-system/tokens.json by
   tools/website/build_tokens.py. Do not edit: change tokens.json and run the script.
   Light values on :root; dark values for a dark system theme (unless the page is set to light)
   and for data-theme="dark". Load this before every other stylesheet. */

:root {
  color-scheme: light;
  /* Colour */
  --ground: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #eaf0f7;
  --ink: #0a1733;
  --ink-2: #44506a;
  --ink-3: #626d86;
  --line: #d9e1ed;
  --field-line: #848ea5;
  --navy: #062b79;
  --on-navy: #ffffff;
  --teal: #00b4ba;
  --teal-ink: #00787a;
  --focus: #00979c;
  --focus-band: var(--white);
  --blocked: #bf3e36;
  --blocked-bg: #fbe9e7;
  --on-blocked: #ffffff;
  --allowed: #1d7b54;
  --allowed-bg: #e3f3eb;
  --pending: #8a5a00;
  --pending-bg: #fbf0d9;
  --band: #0b2a33;
  --band-2: #103b45;
  --band-ink: #e7f4f4;
  --band-ink-2: #a9cbcc;
  --band-accent: #7fe3e5;
  --glow-hero: rgba(47, 210, 214, 0.16);
  --glow-page: rgba(47, 210, 214, 0.14);
  --glow-card: rgba(47, 210, 214, 0.18);
  --glow-auth: rgba(47, 210, 214, 0.2);
  --glow-line: rgba(127, 227, 229, 0.35);
  --paper-sheen: rgba(255, 255, 255, 0.5);
  --teal-bright: #2fd2d6;
  --on-teal-bright: #062b33;
  --on-teal: #04262b;
  --amber: #e9be66;
  --white: #ffffff;
  --black: #000000;
  --scrim: rgba(3, 8, 16, 0.62);
  --band-fixed: #0b2a33;
  --band-note: #f2d597;
  --band-blocked: #f2897f;
  --phone-bezel: #050b12;
  --test-ink: #44506a;
  --brick-hi: #3adbdf;
  --brick-lo: #0fa0ae;
  --brick-ink: #03252a;
  --brick-free: #a9e6e7;
  --paper: #fffaee;
  --paper-edge: #efe6d2;
  --paper-ink: #17203a;
  --paper-ink-2: #5a6277;
  --paper-rule: #cfc7b3;
  --paper-accent: #00787a;
  --paper-danger: #a3362f;
  --paper-stamp: #b23a31;
  --paper-grain: rgba(120, 100, 60, 0.018);
  --il-red: #c8453d;
  --link: var(--teal-ink);
  --night: #041a3f;
  --night-deep: #03070f;
  --night-deep-hover: #0b1426;
  --hero-blue: #0b3c8c;
  --hero-sea: #0a6e9c;
  --hero-teal: #1fa9b4;
  --hero-page-sea: #0a5e8c;
  --hero-4: #6fd3d8;
  --stage: #06222b;
  --stage-shade: rgba(4, 26, 63, 0.5);
  --bubble-ink: #0a1733;
  --bubble-ink-2: #44506a;
  --bubble-key: #00787a;
  --bubble-dot: #d9e1ed;
  --app-screen-1: #0b1f2f;
  --app-screen-2: #10293a;
  --app-screen-3: #13333f;
  --app-glow-1: rgba(64, 140, 150, 0.35);
  --app-glow-2: rgba(40, 110, 120, 0.28);
  --app-text: #e9eef2;
  --app-title: #f2f5f7;
  --app-sub: #c6d1d8;
  --app-desc: #d2dae0;
  --app-muted: #9fb0bc;
  --app-detail: #b8c5cf;
  --app-seg: #dde4e9;
  --app-seg-on: #c9d4ee;
  --app-seg-on-ink: #0b1c33;
  --app-button-ink: #eef2f4;
  --app-row: #17222f;
  --app-card: #80a0b2;
  --app-blocked: #f08a80;
  --app-allowed: #7fd6a8;
  --app-pause-on-ink: #231800;
  --app-toggle-on-bg: #2b544c;
  --app-toggle-on-line: #4e9c86;
  --app-toggle-on-knob: #1c3833;
  --app-toggle-on-mark: #86d3b7;
  --app-toggle-off-bg: #24323d;
  --app-toggle-off-line: #5b6b77;
  --app-toggle-off-knob: #2e3d48;
  --app-toggle-off-mark: #8795a0;
  --app-nl-ink: #0a1733;
  --app-nl-ink-2: #44506a;
  --app-nl-accent: #00787a;
  --app-nl-red: #9b2f28;
  --app-nl-green: #166142;
  --app-nl-amber: #8a5a00;
  --app-nl-switch-off: #c9d2df;
  --app-nl-art-dark: #07192b;
  --app-nl-scene-sky: #e4edee;
  --app-nl-scene-mist: #b9c3cf;
  --glow-row: rgba(47, 210, 214, 0.22);
  --avatar-sheen: rgba(255, 255, 255, 0.55);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(10, 23, 51, 0.1);
  --wash: #eaf3fa;
  --wash-veil: rgba(255, 255, 255, 0.55);
  --device-rim-hi: #f3f5f8;
  --device-rim-lo: #9aa3b1;
  --ground-shadow: rgba(6, 26, 48, 0.34);
  --icon-blue-hi: #4fa3ff;
  --icon-blue-lo: #0a64e6;
  --icon-teal-hi: #34d3cf;
  --icon-teal-lo: #0a8f97;
  --icon-cyan-hi: #5fd4f5;
  --icon-cyan-lo: #1592c9;
  --icon-indigo-hi: #7b7cf2;
  --icon-indigo-lo: #4543c9;
  --icon-orange-hi: #ffb14a;
  --icon-orange-lo: #f26b1d;
  --icon-gray-hi: #a7b0bd;
  --icon-gray-lo: #6b7584;
  --icon-amber-hi: #ffd25a;
  --icon-amber-lo: #f59e0b;
  --icon-pink-hi: #ff7aa2;
  --icon-pink-lo: #e2335f;
  --icon-yellow-hi: #ffe066;
  --icon-yellow-lo: #f2b705;
  --icon-purple-hi: #c68cff;
  --icon-purple-lo: #8a3ff0;
  --icon-graphite-hi: #6e7785;
  --icon-graphite-lo: #2f3640;
  --icon-green-hi: #5fdc8a;
  --icon-green-lo: #1faa55;
  --icon-red-hi: #ff7a6b;
  --icon-red-lo: #e0342a;
  --icon-sky-hi: #8fd3ff;
  --icon-sky-lo: #3a9ff0;
  /* Shadow */
  --shadow-lift: 0 1px 2px rgba(10, 23, 51, 0.05), 0 10px 30px -12px rgba(10, 23, 51, 0.14);
  --shadow-logo: 0 18px 50px rgba(6, 43, 121, 0.18);
  --shadow-phone: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-panel: 0 1px 2px rgba(10, 23, 51, 0.05), 0 30px 70px -30px rgba(10, 23, 51, 0.3);
  --shadow-band-card: 0 24px 50px -28px rgba(6, 20, 40, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-brick: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 40, 50, 0.22);
  --shadow-bar: 0 10px 24px -18px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 30px 80px rgba(0, 0, 0, 0.35);
  --shadow-stage: 0 30px 60px -30px rgba(6, 43, 121, 0.35);
  --shadow-tile: 0 1px 2px rgba(10, 23, 51, 0.04), 0 22px 44px -28px rgba(10, 23, 51, 0.28);
  --shadow-device: 0 50px 90px -40px rgba(6, 20, 40, 0.45), 0 0 0 1px rgba(10, 23, 51, 0.06);
  /* Type families */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  /* Spacing */
  --space-gutter: 20px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-card: 22px;
  --space-7: 28px;
  --space-head: 44px;
  --space-section-sm: 60px;
  --space-section: 88px;
  /* Radius */
  --radius-chip: 6px;
  --radius-sm: 8px;
  --radius-nav: 10px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-logo: 24px;
  --radius-pill: 999px;
  --radius-tile: 28px;
  --radius-device: 44px;
  /* Layout */
  --container: 1120px;
  --measure: 680px;
  --container-wide: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Colour */
    --ground: #07101f;
    --surface: #0e1a2e;
    --surface-2: #13223a;
    --ink: #e8eef8;
    --ink-2: #a8b5cb;
    --ink-3: #8491a8;
    --line: #1f2d47;
    --field-line: #59667d;
    --navy: #93b3ff;
    --on-navy: #07101f;
    --teal: #2fd2d6;
    --teal-ink: #4fd9dc;
    --focus: #00b4ba;
    --blocked: #f2897f;
    --blocked-bg: #3a1d1d;
    --on-blocked: #1a0b0a;
    --allowed: #6ad1a0;
    --allowed-bg: #10301f;
    --pending: #e9be66;
    --pending-bg: #33280f;
    --band: #0a2129;
    --band-2: #0f323b;
    --paper: #e8e2d2;
    --paper-edge: #d9d2bf;
    --paper-ink: #151c30;
    --paper-ink-2: #545b6d;
    --paper-rule: #b7ae98;
    --paper-accent: #006a6c;
    --hero-4: #0b4e5e;
    --glass: rgba(8, 15, 28, 0.72);
    --glass-edge: rgba(232, 238, 248, 0.12);
    --wash: #07101f;
    --wash-veil: rgba(7, 16, 31, 0.55);
    --device-rim-hi: #f3f5f8;
    --device-rim-lo: #9aa3b1;
    --ground-shadow: rgba(6, 26, 48, 0.34);
    --icon-blue-hi: #4fa3ff;
    --icon-blue-lo: #0a64e6;
    --icon-teal-hi: #34d3cf;
    --icon-teal-lo: #0a8f97;
    --icon-cyan-hi: #5fd4f5;
    --icon-cyan-lo: #1592c9;
    --icon-indigo-hi: #7b7cf2;
    --icon-indigo-lo: #4543c9;
    --icon-orange-hi: #ffb14a;
    --icon-orange-lo: #f26b1d;
    --icon-gray-hi: #a7b0bd;
    --icon-gray-lo: #6b7584;
    --icon-amber-hi: #ffd25a;
    --icon-amber-lo: #f59e0b;
    --icon-pink-hi: #ff7aa2;
    --icon-pink-lo: #e2335f;
    --icon-yellow-hi: #ffe066;
    --icon-yellow-lo: #f2b705;
    --icon-purple-hi: #c68cff;
    --icon-purple-lo: #8a3ff0;
    --icon-graphite-hi: #6e7785;
    --icon-graphite-lo: #2f3640;
    --icon-green-hi: #5fdc8a;
    --icon-green-lo: #1faa55;
    --icon-red-hi: #ff7a6b;
    --icon-red-lo: #e0342a;
    --icon-sky-hi: #8fd3ff;
    --icon-sky-lo: #3a9ff0;
    /* Shadow */
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6);
    --shadow-stage: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
    --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -28px rgba(0, 0, 0, 0.8);
    --shadow-device: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Colour */
  --ground: #07101f;
  --surface: #0e1a2e;
  --surface-2: #13223a;
  --ink: #e8eef8;
  --ink-2: #a8b5cb;
  --ink-3: #8491a8;
  --line: #1f2d47;
  --field-line: #59667d;
  --navy: #93b3ff;
  --on-navy: #07101f;
  --teal: #2fd2d6;
  --teal-ink: #4fd9dc;
  --focus: #00b4ba;
  --blocked: #f2897f;
  --blocked-bg: #3a1d1d;
  --on-blocked: #1a0b0a;
  --allowed: #6ad1a0;
  --allowed-bg: #10301f;
  --pending: #e9be66;
  --pending-bg: #33280f;
  --band: #0a2129;
  --band-2: #0f323b;
  --paper: #e8e2d2;
  --paper-edge: #d9d2bf;
  --paper-ink: #151c30;
  --paper-ink-2: #545b6d;
  --paper-rule: #b7ae98;
  --paper-accent: #006a6c;
  --hero-4: #0b4e5e;
  --glass: rgba(8, 15, 28, 0.72);
  --glass-edge: rgba(232, 238, 248, 0.12);
  --wash: #07101f;
  --wash-veil: rgba(7, 16, 31, 0.55);
  --device-rim-hi: #f3f5f8;
  --device-rim-lo: #9aa3b1;
  --ground-shadow: rgba(6, 26, 48, 0.34);
  --icon-blue-hi: #4fa3ff;
  --icon-blue-lo: #0a64e6;
  --icon-teal-hi: #34d3cf;
  --icon-teal-lo: #0a8f97;
  --icon-cyan-hi: #5fd4f5;
  --icon-cyan-lo: #1592c9;
  --icon-indigo-hi: #7b7cf2;
  --icon-indigo-lo: #4543c9;
  --icon-orange-hi: #ffb14a;
  --icon-orange-lo: #f26b1d;
  --icon-gray-hi: #a7b0bd;
  --icon-gray-lo: #6b7584;
  --icon-amber-hi: #ffd25a;
  --icon-amber-lo: #f59e0b;
  --icon-pink-hi: #ff7aa2;
  --icon-pink-lo: #e2335f;
  --icon-yellow-hi: #ffe066;
  --icon-yellow-lo: #f2b705;
  --icon-purple-hi: #c68cff;
  --icon-purple-lo: #8a3ff0;
  --icon-graphite-hi: #6e7785;
  --icon-graphite-lo: #2f3640;
  --icon-green-hi: #5fdc8a;
  --icon-green-lo: #1faa55;
  --icon-red-hi: #ff7a6b;
  --icon-red-lo: #e0342a;
  --icon-sky-hi: #8fd3ff;
  --icon-sky-lo: #3a9ff0;
  /* Shadow */
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  --shadow-stage: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -28px rgba(0, 0, 0, 0.8);
  --shadow-device: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
}