/* Bristol Babysitters Club — direction: Hall pass, round 3 (calmer) — generated from tokens.json. Do not edit by hand: change tokens.json and run npm run tokens. */

@font-face { font-family: "Bungee"; src: url("../fonts/Bungee-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  color-scheme: light;
  --paper: #f6eedf;
  --paper-raised: #fffaf1;
  --paper-sunk: #ece3ef;
  --rule: #d8cbe0;
  --perf: #a08fb6;
  --card-edge: #9a8bb4;
  --field-edge: #76668f;
  --ink: #241a3f;
  --ink-muted: #574a72;
  --pen: #1a5c7a;
  --pen-soft: #dcedf0;
  --club-pink: #b01f62;
  --club-pink-soft: #f7dce8;
  --on-club-pink: #ffffff;
  --sticker-edge: #2a1f45;
  --slip: #f7b52c;
  --on-slip: #241a3f;
  --stub: #f0de8c;
  --on-stub: #241a3f;
  --stub-hot: var(--club-pink);
  --tape-orange: #e0874a;
  --tape-orange-soft: #fae3d2;
  --memphis-lilac: #cdbdf0;
  --house-pink: #f79ac0;
  --house-yellow: #ffcd3c;
  --house-mint: #4cc9b0;
  --house-sky: #86bdf6;
  --house-tangerine: #ff8f52;
  --on-house: #1c1238;
  --pending: #8a5100;
  --pending-soft: #fbeec4;
  --confirmed: #0a6b54;
  --confirmed-soft: #d8f0e4;
  --cancelled: #ad2a1f;
  --cancelled-soft: #f9e0db;
  --frozen: #34479e;
  --frozen-soft: #e2e6fa;
  --scrim: #241a3f;
  --link: var(--pen);
  --shadow-paper: 3px 3px 0 #e2d6f5;
  --shadow-sticker: 4px 4px 0 #2a1f45;
  --shadow-sticker-pressed: 1px 1px 0 #2a1f45;
  --shadow-sheet: 0 -2px 0 #2a1f45;
  --focus-ring: 0 0 0 2px #f6eedf, 0 0 0 5px #1a5c7a;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #160f2e;
  --paper-raised: #231a45;
  --paper-sunk: #0e0920;
  --rule: #3d3170;
  --perf: #6a5aa8;
  --card-edge: #5a4d9c;
  --field-edge: #8d80c8;
  --ink: #fbf7ff;
  --ink-muted: #c4bae6;
  --pen: #7fe9ff;
  --pen-soft: #0f3440;
  --club-pink: #ff5ca8;
  --club-pink-soft: #4b1239;
  --on-club-pink: #1e0412;
  --sticker-edge: #8d80c8;
  --slip: #ffbf2e;
  --on-slip: #1c1238;
  --stub: #fff27a;
  --on-stub: #1c1238;
  --tape-orange: #ff9a52;
  --tape-orange-soft: #3d2210;
  --memphis-lilac: #c5b3ff;
  --pending: #ffd36b;
  --pending-soft: #3d2e06;
  --confirmed: #5fe0bf;
  --confirmed-soft: #0e3a30;
  --cancelled: #ff9187;
  --cancelled-soft: #4a1612;
  --frozen: #b8c6ff;
  --frozen-soft: #22264f;
  --scrim: #05020f;
  --shadow-paper: 3px 3px 0 #2c2160;
  --shadow-sticker: 4px 4px 0 #8d80c8;
  --shadow-sticker-pressed: 1px 1px 0 #8d80c8;
  --shadow-sheet: 0 -2px 0 #7a6dbb;
  --focus-ring: 0 0 0 2px #160f2e, 0 0 0 5px #7fe9ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --paper: #160f2e;
  --paper-raised: #231a45;
  --paper-sunk: #0e0920;
  --rule: #3d3170;
  --perf: #6a5aa8;
  --card-edge: #5a4d9c;
  --field-edge: #8d80c8;
  --ink: #fbf7ff;
  --ink-muted: #c4bae6;
  --pen: #7fe9ff;
  --pen-soft: #0f3440;
  --club-pink: #ff5ca8;
  --club-pink-soft: #4b1239;
  --on-club-pink: #1e0412;
  --sticker-edge: #8d80c8;
  --slip: #ffbf2e;
  --on-slip: #1c1238;
  --stub: #fff27a;
  --on-stub: #1c1238;
  --tape-orange: #ff9a52;
  --tape-orange-soft: #3d2210;
  --memphis-lilac: #c5b3ff;
  --pending: #ffd36b;
  --pending-soft: #3d2e06;
  --confirmed: #5fe0bf;
  --confirmed-soft: #0e3a30;
  --cancelled: #ff9187;
  --cancelled-soft: #4a1612;
  --frozen: #b8c6ff;
  --frozen-soft: #22264f;
  --scrim: #05020f;
  --shadow-paper: 3px 3px 0 #2c2160;
  --shadow-sticker: 4px 4px 0 #8d80c8;
  --shadow-sticker-pressed: 1px 1px 0 #8d80c8;
  --shadow-sheet: 0 -2px 0 #7a6dbb;
  --focus-ring: 0 0 0 2px #160f2e, 0 0 0 5px #7fe9ff;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sticker-tilt: -3deg;
  --tap-target: 48px;
  --control-sm: 36px;
  --tab-bar: 64px;
  --content-max: 560px;
  --perf-notch: 18px;
  --stub-width: 76px;
  --stripe-band: 3px;
  --avatar: 40px;
  --font-display: Bungee, Impact, "Arial Black", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
}

.t-display { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 400; }
.t-title { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 400; }
.t-stub { font-family: var(--font-display); font-size: 32px; line-height: 32px; font-weight: 400; }
.t-heading { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 800; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; }
.t-caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; }
.t-overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.t-scribble { font-family: var(--font-marker); font-size: 20px; line-height: 24px; font-weight: 400; }