@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-emphasis: "Bricolage Grotesque", var(--font-body);
  --font-size-body: 17px;
  --line-height-body: 1.47;
  --space-hairline: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-inset: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-section: 120px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-group: 28px;
  --radius-pill: 999px;
  --target: 44px;
  --button-height: 50px;
  --page: 1180px;
  --readable: 680px;
  --nav-height: 56px;
  --glass-bar: 78%;
  --glass-bar-fallback: 92%;
  --glass-blur: 20px;
  --glass-saturate: 180%;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-short: 200ms;
  --duration-long: 400ms;
  --background: #f2f2f7;
  --row: #ffffff;
  --label: #000000;
  --secondary: #6c6c70;
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(120, 120, 128, 0.12);
  --on-color: #ffffff;
  --night: #000000;
  --night-label: #ffffff;
  --night-secondary: #a1a1a6;
  --night-separator: rgba(84, 84, 88, 0.6);
  --night-tint: #ff8533;
  --night-on-tint: #000000;
  --night-on-color: #000000;
  --night-fill: rgba(255, 255, 255, 0.16);
  --night-positive: #9db35c;
  --night-warning: #e3b04b;
  --retro-mustard: #906716;
  --retro-orange: #af5626;
  --retro-rust: #a63d2c;
  --retro-olive: #5c762d;
  --retro-teal: #2a7069;
  --retro-denim: #3d5f86;
  --retro-plum: #74415f;
  --retro-brown: #7e5536;
  --retro-cream: #f0e6d2;
  --positive: var(--retro-olive);
  --negative: var(--retro-rust);
  --warning: var(--retro-mustard);
  --info: var(--retro-denim);
  --pro: var(--retro-mustard);
  --tint: #b3470c;
  --on-tint: #ffffff;
  --chip-fill: 6%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --row: #1c1c1e;
    --label: #ffffff;
    --secondary: #98989f;
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(118, 118, 128, 0.24);
    --on-color: #000000;
    --night: #1c1c1e;
    --night-label: #ffffff;
    --night-secondary: #a1a1a6;
    --night-separator: rgba(84, 84, 88, 0.6);
    --night-tint: #ff8533;
    --night-on-tint: #000000;
    --night-on-color: #000000;
    --night-fill: rgba(255, 255, 255, 0.16);
    --night-positive: #9db35c;
    --night-warning: #e3b04b;
    --retro-mustard: #e3b04b;
    --retro-orange: #e38049;
    --retro-rust: #dc6a54;
    --retro-olive: #9db35c;
    --retro-teal: #62aba2;
    --retro-denim: #7fa0c6;
    --retro-plum: #b57fa0;
    --retro-brown: #bc8a62;
    --retro-cream: #e6dac2;
    --positive: var(--retro-olive);
    --negative: var(--retro-rust);
    --warning: var(--retro-mustard);
    --info: var(--retro-denim);
    --pro: var(--retro-mustard);
    --tint: #ff8533;
    --on-tint: #000000;
    --chip-fill: 12%;
  }
}