/* Generated by app/design/scripts/build-kerbside.mjs from app/design/kerbside.tokens.json. Do not edit. */

:root {
  color-scheme: light dark;
  --kb-footpath: #EEF1EC;
  --kb-kerb: #FFFFFF;
  --kb-raise: #F4F6F2;
  --kb-surface: #F7F9F5;
  --kb-line-soft: #E2E7E0;
  --kb-line: #DCE2DA;
  --kb-ink: #17201B;
  --kb-ink-2: #4C5852;
  --kb-ink-3: #5F6B64;
  --kb-gum: #17694E;
  --kb-gum-deep: #0E4636;
  --kb-gum-wash: #DAEBE2;
  --kb-on-gum: #FFFFFF;
  --kb-amber: #F4A53A;
  --kb-on-amber: #17201B;
  --kb-amber-ink: #8A5200;
  --kb-amber-wash: #FBEBD3;
  --kb-torch-on: #FFF4D6;
  --kb-rose: #F8E8EA;
  --kb-rose-ink: #8E2A3A;
  --kb-danger: #B3342A;
  --kb-bin-body: #26302B;
  --kb-bin-rib: #FFFFFF24;
  --kb-bin-wheel: #0B0F0D;
  --kb-patch-body: #17694E;
  --kb-patch-face: #FFFFFF;
  --kb-patch-roof-neutral: #4C5852;
  --kb-patch-roof-concerned: #B6BFB9;
  --kb-lid-edge: #17201B59;
  --kb-shadow-near: #17201B0F;
  --kb-shadow-far: #17201B0F;
  --kb-icon-ground: #17694E;
  --kb-icon-moon: #FFF4DA;
  --kb-icon-kerb-line: #FFFFFF38;
  --kb-icon-bin-body: #F7F9F5;
  --kb-icon-bin-rib: #DAEBE2;
  --kb-icon-bin-wheel: #0E4636;
  --kb-scene-sky-top: #121A17;
  --kb-scene-sky-bottom: #18221E;
  --kb-scene-driveway: #232D29;
  --kb-scene-kerb: #2B3631;
  --kb-scene-kerb-edge: #4A5852;
  --kb-scene-lamp-pole: #3A4741;
  --kb-scene-lamp-head: #FFB547;
  --kb-scene-torch-glow: #FFF8E157;
  --kb-street-sky-top: #DDE9E2;
  --kb-street-sky-bottom: #F1F4EF;
  --kb-street-driveway: #E2E7E0;
  --kb-street-kerb: #CBD3C9;
  --kb-street-kerb-edge: #A3AFA6;
  --kb-street-lamp-pole: #B6BFB9;
  --kb-street-lamp-off: #D3DAD2;
  --kb-lid-red: #CC3D31;
  --kb-on-lid-red: #FFFFFF;
  --kb-lid-yellow: #F6C31C;
  --kb-on-lid-yellow: #17201B;
  --kb-lid-green: #2E7D32;
  --kb-on-lid-green: #FFFFFF;
  --kb-lid-lime: #9BC53D;
  --kb-on-lid-lime: #17201B;
  --kb-lid-purple: #7B4FA6;
  --kb-on-lid-purple: #FFFFFF;
  --kb-lid-blue: #2F6DB3;
  --kb-on-lid-blue: #FFFFFF;
  --kb-lid-black: #2B302E;
  --kb-on-lid-black: #FFFFFF;
  --kb-lid-grey: #59625E;
  --kb-on-lid-grey: #FFFFFF;
  --kb-lid-white: #F2F4F1;
  --kb-on-lid-white: #17201B;
  --kb-lid-orange: #E8772E;
  --kb-on-lid-orange: #17201B;
  --kb-lid-general: var(--kb-lid-red);
  --kb-lid-recycling: var(--kb-lid-yellow);
  --kb-lid-green-waste: var(--kb-lid-green);
  --kb-lid-fogo: var(--kb-lid-lime);
  --kb-lid-glass: var(--kb-lid-purple);
  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 24px;
  --kb-space-6: 32px;
  --kb-space-7: 48px;
  --kb-space-card-vertical: 14px;
  --kb-space-button-horizontal: 22px;
  --kb-radius-control: 10px;
  --kb-radius-row: 16px;
  --kb-radius-card: 22px;
  --kb-radius-today-chip: 8px;
  --kb-radius-month-today: 7px;
  --kb-radius-badge: 5px;
  --kb-radius-search: 14px;
  --kb-radius-pill: 999px;
  --kb-font-display: "Overpass", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --kb-font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kb-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --kb-type-display: clamp(40px, 6vw, 72px);
  --kb-type-title: 28px;
  --kb-type-headline: 18px;
  --kb-type-body: 17px;
  --kb-type-caption: 13px;
  --kb-dur-sunset-handover: 900ms;
  --kb-dur-kerb-roll: 550ms;
  --kb-dur-press: 150ms;
  --kb-dur-select: 200ms;
  --kb-dur-reveal: 300ms;
  --kb-dur-loading: 1200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kb-footpath: #0D1210;
    --kb-kerb: #161E1A;
    --kb-raise: #1F2925;
    --kb-surface: #131A17;
    --kb-line-soft: #222C28;
    --kb-line: #2C3832;
    --kb-ink: #ECF0EB;
    --kb-ink-2: #A9B6AF;
    --kb-ink-3: #84928A;
    --kb-gum: #5CC596;
    --kb-gum-deep: #9EE0C0;
    --kb-gum-wash: #173328;
    --kb-on-gum: #0D1210;
    --kb-amber: #FFB547;
    --kb-on-amber: #17201B;
    --kb-amber-ink: #FFC877;
    --kb-amber-wash: #3A2A12;
    --kb-torch-on: #FFF4D6;
    --kb-rose: #3A2228;
    --kb-rose-ink: #F2B8C2;
    --kb-danger: #FF8F84;
    --kb-bin-body: #3B4842;
    --kb-bin-rib: #FFFFFF1F;
    --kb-bin-wheel: #050706;
    --kb-patch-body: #5CC596;
    --kb-patch-face: #0D1210;
    --kb-patch-roof-neutral: #A9B6AF;
    --kb-patch-roof-concerned: #6F7B75;
    --kb-lid-edge: #00000000;
    --kb-shadow-near: #0000004D;
    --kb-shadow-far: #00000040;
    --kb-icon-ground: #0D1210;
    --kb-icon-moon: #FFE2A8;
    --kb-icon-kerb-line: #FFFFFF24;
    --kb-icon-bin-body: #5CC596;
    --kb-icon-bin-rib: #0D121040;
    --kb-icon-bin-wheel: #050706;
    --kb-scene-sky-top: #121A17;
    --kb-scene-sky-bottom: #18221E;
    --kb-scene-driveway: #232D29;
    --kb-scene-kerb: #2B3631;
    --kb-scene-kerb-edge: #4A5852;
    --kb-scene-lamp-pole: #3A4741;
    --kb-scene-lamp-head: #FFB547;
    --kb-scene-torch-glow: #FFF8E157;
    --kb-street-sky-top: #1B2621;
    --kb-street-sky-bottom: #1F2925;
    --kb-street-driveway: #232D29;
    --kb-street-kerb: #2B3631;
    --kb-street-kerb-edge: #4A5852;
    --kb-street-lamp-pole: #3A4741;
    --kb-street-lamp-off: #4A5852;
    --kb-lid-red: #CC3D31;
    --kb-on-lid-red: #FFFFFF;
    --kb-lid-yellow: #F6C31C;
    --kb-on-lid-yellow: #17201B;
    --kb-lid-green: #3C9A41;
    --kb-on-lid-green: #17201B;
    --kb-lid-lime: #9BC53D;
    --kb-on-lid-lime: #17201B;
    --kb-lid-purple: #9B74C9;
    --kb-on-lid-purple: #17201B;
    --kb-lid-blue: #5B93D6;
    --kb-on-lid-blue: #17201B;
    --kb-lid-black: #66706B;
    --kb-on-lid-black: #FFFFFF;
    --kb-lid-grey: #8E9993;
    --kb-on-lid-grey: #17201B;
    --kb-lid-white: #E6EAE6;
    --kb-on-lid-white: #17201B;
    --kb-lid-orange: #E8772E;
    --kb-on-lid-orange: #17201B;
  }
}

:root[data-theme="dark"] {
  --kb-footpath: #0D1210;
  --kb-kerb: #161E1A;
  --kb-raise: #1F2925;
  --kb-surface: #131A17;
  --kb-line-soft: #222C28;
  --kb-line: #2C3832;
  --kb-ink: #ECF0EB;
  --kb-ink-2: #A9B6AF;
  --kb-ink-3: #84928A;
  --kb-gum: #5CC596;
  --kb-gum-deep: #9EE0C0;
  --kb-gum-wash: #173328;
  --kb-on-gum: #0D1210;
  --kb-amber: #FFB547;
  --kb-on-amber: #17201B;
  --kb-amber-ink: #FFC877;
  --kb-amber-wash: #3A2A12;
  --kb-torch-on: #FFF4D6;
  --kb-rose: #3A2228;
  --kb-rose-ink: #F2B8C2;
  --kb-danger: #FF8F84;
  --kb-bin-body: #3B4842;
  --kb-bin-rib: #FFFFFF1F;
  --kb-bin-wheel: #050706;
  --kb-patch-body: #5CC596;
  --kb-patch-face: #0D1210;
  --kb-patch-roof-neutral: #A9B6AF;
  --kb-patch-roof-concerned: #6F7B75;
  --kb-lid-edge: #00000000;
  --kb-shadow-near: #0000004D;
  --kb-shadow-far: #00000040;
  --kb-icon-ground: #0D1210;
  --kb-icon-moon: #FFE2A8;
  --kb-icon-kerb-line: #FFFFFF24;
  --kb-icon-bin-body: #5CC596;
  --kb-icon-bin-rib: #0D121040;
  --kb-icon-bin-wheel: #050706;
  --kb-scene-sky-top: #121A17;
  --kb-scene-sky-bottom: #18221E;
  --kb-scene-driveway: #232D29;
  --kb-scene-kerb: #2B3631;
  --kb-scene-kerb-edge: #4A5852;
  --kb-scene-lamp-pole: #3A4741;
  --kb-scene-lamp-head: #FFB547;
  --kb-scene-torch-glow: #FFF8E157;
  --kb-street-sky-top: #1B2621;
  --kb-street-sky-bottom: #1F2925;
  --kb-street-driveway: #232D29;
  --kb-street-kerb: #2B3631;
  --kb-street-kerb-edge: #4A5852;
  --kb-street-lamp-pole: #3A4741;
  --kb-street-lamp-off: #4A5852;
  --kb-lid-red: #CC3D31;
  --kb-on-lid-red: #FFFFFF;
  --kb-lid-yellow: #F6C31C;
  --kb-on-lid-yellow: #17201B;
  --kb-lid-green: #3C9A41;
  --kb-on-lid-green: #17201B;
  --kb-lid-lime: #9BC53D;
  --kb-on-lid-lime: #17201B;
  --kb-lid-purple: #9B74C9;
  --kb-on-lid-purple: #17201B;
  --kb-lid-blue: #5B93D6;
  --kb-on-lid-blue: #17201B;
  --kb-lid-black: #66706B;
  --kb-on-lid-black: #FFFFFF;
  --kb-lid-grey: #8E9993;
  --kb-on-lid-grey: #17201B;
  --kb-lid-white: #E6EAE6;
  --kb-on-lid-white: #17201B;
  --kb-lid-orange: #E8772E;
  --kb-on-lid-orange: #17201B;
}

.kb-night {
  color-scheme: dark;
  --kb-footpath: #0D1210;
  --kb-kerb: #161E1A;
  --kb-raise: #1F2925;
  --kb-surface: #131A17;
  --kb-line-soft: #222C28;
  --kb-line: #2C3832;
  --kb-ink: #ECF0EB;
  --kb-ink-2: #A9B6AF;
  --kb-ink-3: #84928A;
  --kb-gum: #5CC596;
  --kb-gum-deep: #9EE0C0;
  --kb-gum-wash: #173328;
  --kb-on-gum: #0D1210;
  --kb-amber: #FFB547;
  --kb-on-amber: #17201B;
  --kb-amber-ink: #FFC877;
  --kb-amber-wash: #3A2A12;
  --kb-torch-on: #FFF4D6;
  --kb-rose: #3A2228;
  --kb-rose-ink: #F2B8C2;
  --kb-danger: #FF8F84;
  --kb-bin-body: #3B4842;
  --kb-bin-rib: #FFFFFF1F;
  --kb-bin-wheel: #050706;
  --kb-patch-body: #5CC596;
  --kb-patch-face: #0D1210;
  --kb-patch-roof-neutral: #A9B6AF;
  --kb-patch-roof-concerned: #6F7B75;
  --kb-lid-edge: #00000000;
  --kb-shadow-near: #0000004D;
  --kb-shadow-far: #00000040;
  --kb-icon-ground: #0D1210;
  --kb-icon-moon: #FFE2A8;
  --kb-icon-kerb-line: #FFFFFF24;
  --kb-icon-bin-body: #5CC596;
  --kb-icon-bin-rib: #0D121040;
  --kb-icon-bin-wheel: #050706;
  --kb-scene-sky-top: #121A17;
  --kb-scene-sky-bottom: #18221E;
  --kb-scene-driveway: #232D29;
  --kb-scene-kerb: #2B3631;
  --kb-scene-kerb-edge: #4A5852;
  --kb-scene-lamp-pole: #3A4741;
  --kb-scene-lamp-head: #FFB547;
  --kb-scene-torch-glow: #FFF8E157;
  --kb-street-sky-top: #1B2621;
  --kb-street-sky-bottom: #1F2925;
  --kb-street-driveway: #232D29;
  --kb-street-kerb: #2B3631;
  --kb-street-kerb-edge: #4A5852;
  --kb-street-lamp-pole: #3A4741;
  --kb-street-lamp-off: #4A5852;
  --kb-lid-red: #CC3D31;
  --kb-on-lid-red: #FFFFFF;
  --kb-lid-yellow: #F6C31C;
  --kb-on-lid-yellow: #17201B;
  --kb-lid-green: #3C9A41;
  --kb-on-lid-green: #17201B;
  --kb-lid-lime: #9BC53D;
  --kb-on-lid-lime: #17201B;
  --kb-lid-purple: #9B74C9;
  --kb-on-lid-purple: #17201B;
  --kb-lid-blue: #5B93D6;
  --kb-on-lid-blue: #17201B;
  --kb-lid-black: #66706B;
  --kb-on-lid-black: #FFFFFF;
  --kb-lid-grey: #8E9993;
  --kb-on-lid-grey: #17201B;
  --kb-lid-white: #E6EAE6;
  --kb-on-lid-white: #17201B;
  --kb-lid-orange: #E8772E;
  --kb-on-lid-orange: #17201B;
}

@media (prefers-contrast: more) {
  :root {
    --kb-line: #8D9891;
    --kb-ink-2: #3A453F;
    --kb-ink-3: #4C5852;
    --kb-gum: #0F5A42;
    --kb-amber-ink: #6E4100;
    --kb-lid-edge: #17201B99;
    --kb-street-kerb-edge: #68746C;
    --kb-street-lamp-pole: #7D8780;
    --kb-lid-red: #B3342A;
    --kb-lid-purple: #6A4192;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kb-line: #5A6A62;
    --kb-ink-2: #C4CFC9;
    --kb-ink-3: #A9B6AF;
    --kb-gum: #7FDDB0;
    --kb-amber-ink: #FFD9A0;
    --kb-lid-edge: #ECF0EB66;
    --kb-street-kerb-edge: #7F8D86;
    --kb-street-lamp-pole: #74827B;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"],
  .kb-night {
    --kb-line: #5A6A62;
    --kb-ink-2: #C4CFC9;
    --kb-ink-3: #A9B6AF;
    --kb-gum: #7FDDB0;
    --kb-amber-ink: #FFD9A0;
    --kb-lid-edge: #ECF0EB66;
    --kb-street-kerb-edge: #7F8D86;
    --kb-street-lamp-pole: #74827B;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kb-dur-sunset-handover: 0ms;
    --kb-dur-kerb-roll: 0ms;
    --kb-dur-press: 0ms;
    --kb-dur-select: 0ms;
    --kb-dur-reveal: 0ms;
    --kb-dur-loading: 0ms;
  }
}

.kb-lidstripe { display: inline-flex; gap: 3px; align-items: center; }
.kb-lidstripe > span { display: block; width: 14px; height: 5px; border-radius: 999px; }
.kb-lidstripe > span:nth-child(1) { background: var(--kb-lid-general); }
.kb-lidstripe > span:nth-child(2) { background: var(--kb-lid-recycling); }
.kb-lidstripe > span:nth-child(3) { background: var(--kb-lid-green-waste); }
.kb-lidstripe > span:nth-child(4) { background: var(--kb-lid-fogo); }
.kb-lidstripe > span:nth-child(5) { background: var(--kb-lid-glass); }