/* beasel's bakery tokens. Generated from tokens.json; edit that file, not this one. */

:root, [data-theme="blush"] {
  --blush-100: #fdeef3;
  --blush-300: #f7c4d5;
  --raspberry-500: #e43f62;
  --raspberry-700: #b8224a;
  --sky-400: #3fb7e4;
  --sky-700: #1c6a8e;
  --ink-900: #151b22;
  --ink-700: #222831;
  --plum-600: #6b4a57;
  --cream-50: #fff8fa;
  --white: #ffffff;
  --surface-page: var(--blush-100);
  --surface-band: var(--blush-300);
  --surface-card: var(--cream-50);
  --text-primary: var(--ink-900);
  --text-muted: var(--plum-600);
  --text-accent: var(--raspberry-700);
  --action-fill: var(--raspberry-700);
  --action-hover: #9c1b3e;
  --action-text: #ffffff;
  --sprinkle-pink: var(--raspberry-500);
  --sprinkle-blue: var(--sky-400);
  --funfetti-yellow: #cf9902;
  --funfetti-green: #64ae43;
  --funfetti-blue: #0477b7;
  --line-soft: #eaa9bf;
  --line-strong: var(--plum-600);
  --focus-ring: var(--sky-700);
  --shadow-sticker: 0 4px 0 0 #eaa9bf;
  --shadow-float: 0 12px 28px -10px rgba(184, 34, 74, 0.35);
}

[data-theme="midnight"] {
  --surface-page: var(--ink-900);
  --surface-band: var(--ink-700);
  --surface-card: #2a313b;
  --text-primary: var(--blush-300);
  --text-muted: #c9a3b2;
  --text-accent: #ff7a96;
  --action-fill: #ff7a96;
  --action-hover: #ff9bb0;
  --action-text: var(--ink-900);
  --sprinkle-pink: var(--raspberry-500);
  --sprinkle-blue: var(--sky-400);
  --line-soft: #3a424e;
  --line-strong: #c9a3b2;
  --focus-ring: #7fd0f0;
  --shadow-sticker: 0 4px 0 0 #0b0e12;
  --shadow-float: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

:root {
  --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;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
}

.display-xl {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 68px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.display {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 50px;
  font-weight: 600;
}

.heading {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
}

.subheading {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.caption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}