:root {
  color-scheme: light;
  
  --ground: #FFFDFA;
  --surface: #FFFFFF;
  --surface-2: #F3F1EB;
  --ink: #14110F;
  --ink-2: #57504A;
  --ink-3: #8A837A;
  --hairline: #E6E0D6;
  --nose: #E23D2E;
  --sun: #F5A524;
  --proved: #1F7A5A;
  --unread: #8A837A;
  --refused: #B3271A;
  --on-nose: #FFFFFF;
  --on-sun: #14110F;
  --shadow-ink: #14110F;
  --focus: #14110F;
  --scrim: rgba(20, 17, 15, 0.55);
  
  --on-ink: var(--ground);
  --emphasis: var(--nose);
  --sun-soft: color-mix(in srgb, var(--sun) 20%, var(--surface));
  --proved-soft: color-mix(in srgb, var(--proved) 10%, var(--surface));
  --unread-soft: color-mix(in srgb, var(--unread) 15%, var(--surface));
  --refused-soft: color-mix(in srgb, var(--refused) 11%, var(--surface));
  --border: var(--bw-2) solid var(--ink);
  --border-off: var(--bw-2) dashed var(--ink-3);
  --rule: var(--bw-1) solid var(--hairline);
  --rule-dashed: var(--bw-1) dashed var(--ink-3);
  --pop-2: 2px 2px 0 var(--shadow-ink);
  --pop-3: 3px 3px 0 var(--shadow-ink);
  --pop-5: 5px 5px 0 var(--shadow-ink);
  --focus-ring: var(--bw-2) solid var(--focus);
  
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;
  --fw-800: 800;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-88: 88px;
  --lh-16: 16px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-28: 28px;
  --lh-32: 32px;
  --lh-40: 40px;
  --lh-44: 44px;
  --lh-60: 60px;
  --lh-76: 76px;
  --lh-88: 88px;
  --track-display: -0.03em;
  --track-head: -0.02em;
  --track-number: -0.02em;
  --track-caption: 0.02em;
  --track-label: 0.06em;
  --allin-fluid: 23cqi;
  --allin-fluid-long: 15cqi;
  
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --gutter: 16px;
  
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-pill: 999px;
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --press: 2px;
  --focus-offset: 2px;
  
  --target: 44px;
  --control-m: 48px;
  --control-l: 56px;
  --control-xl: 64px;
  --header-h: 88px;
  --ic-14: 14px;
  --ic-16: 16px;
  --ic-20: 20px;
  --ic-24: 24px;
  --av-32: 32px;
  --av-40: 40px;
  --av-48: 48px;
  --av-64: 64px;
  --av-88: 88px;
  --av-112: 112px;
  --mark-header: 40px;
  --mark-footer: 48px;
  --mark-receipt: 28px;
  --animal: 44px;
  --badge: 22px;
  --bar: 8px;
  --dot: 10px;
  --w-page: 1440px;
  --w-read: 1100px;
  --w-narrow: 760px;
  --w-buy: 460px;
  --w-bill: 440px;
  --w-filters: 264px;
  --w-card: 248px;
  --w-receipt: 480px;
  --w-phone: 390px;
  --w-rcpt-rest: 168px;
  --w-col-qty: 236px;
  --w-col-num: 132px;
  --w-col-speed: 120px;
  --w-col-act: 44px;
  --w-prose: 68ch;
  --w-statement: 18ch;
  
  --t-press: 120ms;
  --t-toast: 160ms;
  --z-header: 10;
  --z-bar: 20;
  --z-toast: 30;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }






:root {
  --up: #178050;   
  --down: #C6281B;
  --tent: #E23D2E;
  --up-soft: color-mix(in srgb, var(--up) 14%, var(--surface));
  --down-soft: color-mix(in srgb, var(--down) 14%, var(--surface));
  --stripe: repeating-linear-gradient(-45deg, var(--tent) 0 var(--sp-8), var(--ground) var(--sp-8) var(--sp-16));
  --tile: color-mix(in srgb, var(--sun) 88%, var(--surface));
  --tile-off: var(--surface-2);
  
  --hdr-h: 64px;
  --dial-h: 72px;
  --dial-line: 14px;
  --dial-track-h: 48px;
  --bar-h: 64px;
  
  --actbar-h: calc(var(--bw-2) + var(--sp-8) + var(--control-m) + var(--sp-8) + env(safe-area-inset-bottom, 0px));
  --knob: 28px;
  --knob-hit: 44px;
  --tick: 6px;
  --w-card2: 196px;
  --w-card2-s: 156px;
  --tile-s: 56px;
  --tile-m: 64px;
  --tile-l: 160px;
  --tile-xl: 220px;
  --tmark-h: 24px;
  --fs-24: 24px;
  --fs-32: 32px;
  --lh-36: 36px;
  --fs-48: 48px;
  --lh-52: 52px;
  --w-sheet2: 520px;
  --w-ledger: 820px;
  --w-troupe: 640px;
  --clown-troupe: 96px;
  --clown-troupe-s: 64px;
  --z-dial: 9;
  --z-sheet: 40;
  --t-knob: 180ms;
  --t-pop: 260ms;
}


:root { --ground: #F5A524; --surface: #FFFFFF; --surface-2: #FFF0D2; --hairline: #14110F; --ink-2: #4A423B; --tile: #FFFFFF; --tile-m: 72px; --tile-s: 56px; --shadow-ink: #14110F; --sun-soft: #FFE6B3; }



:root {
  --nose-badge: 22px;
  --nose-badge-l: 36px;
  --tile-page: 112px;
  --chart-h: 260px;
  --chart-h-s: 220px;
  --bag-h: 160px;
  --wait-clown: 160px;
  --empty-clown: 96px;
  --w-stepper-s: 200px;
  --sp-10: 10px;
  --fs-13: 13px;
  --paper: #FAF9F6;   
  --paper-2: #D9D2C7; 
}