/* Lone Bee — generated from design/tokens.json by scripts/tokens.js. Do not edit. */

@font-face {
  font-family: "Jersey 10";
  src: url("/fonts/jersey-10.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/atkinson-hyperlegible-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --comb-black: #0c080b;
  --hive: #1a1211;
  --propolis: #2a1d19;
  --bark: #422d24;
  --umber: #634430;
  --tawny: #8f6943;
  --burnt-comb: #6e2815;
  --amber: #ad451a;
  --marmalade: #dd6f20;
  --honey: #f39c2e;
  --gold: #fac54a;
  --pollen: #fde68e;
  --old-wax: #9c8670;
  --wax: #c9b28e;
  --beeswax: #f3e6c6;
  --sunlight: #fffaea;
  --night: #111528;
  --dusk: #1b2844;
  --slate: #2a4462;
  --deep-teal: #3c6b7c;
  --sky: #5c9d9f;
  --mist: #8fcdc0;
  --glint: #c9eedc;
  --moss: #27391f;
  --grass: #4b6528;
  --sunlit-grass: #8c9e3a;
  --wine: #3d1830;
  --heather: #77294a;
  --lavender: #9a85c8;
  --clover: #bb4050;
  --coral: #ec7560;
  --peach: #f7b08a;
  --bg: var(--hive);
  --surface: var(--propolis);
  --surface-hover: var(--bark);
  --sunken: var(--comb-black);
  --border: var(--umber);
  --border-strong: var(--tawny);
  --text: var(--beeswax);
  --text-muted: var(--wax);
  --text-faint: var(--old-wax);
  --accent: var(--gold);
  --accent-hover: var(--pollen);
  --accent-edge: var(--amber);
  --on-accent: var(--comb-black);
  --link: var(--mist);
  --link-hover: var(--glint);
  --focus: var(--glint);
  --success: var(--sky);
  --warning: var(--marmalade);
  --danger: var(--coral);
  --hero-sky: var(--dusk);
  --sky-top: var(--night);
  --font-display: "Jersey 10", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --type-display-xl: 400 112px/112px var(--font-display);
  --type-display-xl-tracking: normal;
  --type-display-l: 400 56px/56px var(--font-display);
  --type-display-l-tracking: normal;
  --type-display-m: 400 28px/32px var(--font-display);
  --type-display-m-tracking: normal;
  --type-lead: 400 20px/32px var(--font-body);
  --type-lead-tracking: normal;
  --type-body: 400 16px/24px var(--font-body);
  --type-body-tracking: normal;
  --type-small: 400 14px/20px var(--font-body);
  --type-small-tracking: normal;
  --type-label: 700 16px/24px var(--font-body);
  --type-label-tracking: normal;
  --type-tag: 700 14px/20px var(--font-body);
  --type-tag-tracking: normal;
  --type-code: 400 15px/24px var(--font-mono);
  --type-code-tracking: normal;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --pixel: 2px;
  --drop: 4px;
  --focus-width: 2px;
  --focus-offset: 4px;
  --focus-offset-button: 8px;
  --radius-none: 0;
  --shadow-frame: 0 -2px 0 0 #634430, 0 2px 0 0 #634430, -2px 0 0 0 #634430, 2px 0 0 0 #634430;
  --shadow-frame-strong: 0 -2px 0 0 #8f6943, 0 2px 0 0 #8f6943, -2px 0 0 0 #8f6943, 2px 0 0 0 #8f6943;
  --shadow-button: 0 -2px 0 0 #fac54a, 0 2px 0 0 #fac54a, -2px 0 0 0 #fac54a, 2px 0 0 0 #fac54a, 4px 2px 0 0 #ad451a, 4px 6px 0 0 #ad451a, 2px 4px 0 0 #ad451a, 6px 4px 0 0 #ad451a, 4px 4px 0 0 #ad451a;
  --shadow-button-hover: 0 -2px 0 0 #fde68e, 0 2px 0 0 #fde68e, -2px 0 0 0 #fde68e, 2px 0 0 0 #fde68e, 4px 2px 0 0 #ad451a, 4px 6px 0 0 #ad451a, 2px 4px 0 0 #ad451a, 6px 4px 0 0 #ad451a, 4px 4px 0 0 #ad451a;
  --shadow-button-pressed: 0 -2px 0 0 #fac54a, 0 2px 0 0 #fac54a, -2px 0 0 0 #fac54a, 2px 0 0 0 #fac54a;
  --shadow-button-secondary: 0 -2px 0 0 #8f6943, 0 2px 0 0 #8f6943, -2px 0 0 0 #8f6943, 2px 0 0 0 #8f6943, 4px 2px 0 0 #0c080b, 4px 6px 0 0 #0c080b, 2px 4px 0 0 #0c080b, 6px 4px 0 0 #0c080b, 4px 4px 0 0 #0c080b;
  --shadow-button-secondary-hover: 0 -2px 0 0 #f3e6c6, 0 2px 0 0 #f3e6c6, -2px 0 0 0 #f3e6c6, 2px 0 0 0 #f3e6c6, 4px 2px 0 0 #0c080b, 4px 6px 0 0 #0c080b, 2px 4px 0 0 #0c080b, 6px 4px 0 0 #0c080b, 4px 4px 0 0 #0c080b;
  --shadow-button-secondary-pressed: 0 -2px 0 0 #f3e6c6, 0 2px 0 0 #f3e6c6, -2px 0 0 0 #f3e6c6, 2px 0 0 0 #f3e6c6;
  --shadow-title: 4px 4px 0 #6e2815;
  --shadow-title-small: 2px 2px 0 #6e2815;
  --content-max: 1200px;
  --gutter: 24px;
  --gutter-narrow: 16px;
  --measure: 60ch;
  --hero-min: 280px;
  --hero-wide-min: 560px;
  --hero-fluid: 75vw;
  --hero-wide-fluid: 50vw;
  --hero-max: 760px;
  --mark-size: 64px;
  --tap-min: 44px;
  --layer-art: 0;
  --layer-content: 1;
  --layer-skip: 100;
}