/* The Good Times design tokens. Generated from the design system's tokens.json; edit there, not here. */

:root,
[data-theme="daylight"] {
  --brand-coral: #ef6f62;
  --brand-teal: #20a9a4;
  --brand-sun: #ffd558;
  --brand-cloud: #f2f2f2;
  --brand-ink: #194f52;
  --coral-light: #f49a72;
  --teal-light: #5cc6c1;
  --sun-light: #ffe48f;
  --coral-deep: #b83e32;
  --teal-deep: #0e7571;
  --ink-deep: #0b2b2d;
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-sunk: #e6ecec;
  --text: #194f52;
  --text-muted: #4a6e70;
  --text-accent: #b83e32;
  --on-coral: var(--ink-deep);
  --on-teal: var(--ink-deep);
  --on-sun: var(--ink-deep);
  --coral-soft: #fce1de;
  --teal-soft: #d2efee;
  --sun-soft: #fff3cc;
  --line: #d5dede;
  --focus: #0e7571;
  --shadow-sticker: 4px 6px 0 #0b2b2d;
  --shadow-lift: 0 14px 30px rgba(25, 79, 82, 0.18);
  --shadow-glow: 0 18px 40px rgba(239, 111, 98, 0.35);
}

[data-theme="stage"] {
  --brand-coral: #ef6f62;
  --brand-teal: #20a9a4;
  --brand-sun: #ffd558;
  --brand-cloud: #f2f2f2;
  --brand-ink: #194f52;
  --coral-light: #f49a72;
  --teal-light: #5cc6c1;
  --sun-light: #ffe48f;
  --coral-deep: #b83e32;
  --teal-deep: #0e7571;
  --ink-deep: #0b2b2d;
  --bg: #0f3436;
  --surface: #194f52;
  --surface-sunk: #0b2b2d;
  --text: #f2f2f2;
  --text-muted: #a9c3c3;
  --text-accent: #f8aea6;
  --on-coral: var(--ink-deep);
  --on-teal: var(--ink-deep);
  --on-sun: var(--ink-deep);
  --coral-soft: #5a3936;
  --teal-soft: #13494a;
  --sun-soft: #4a4630;
  --line: #2a5e61;
  --focus: #ffd558;
  --shadow-sticker: 4px 6px 0 #0b2b2d;
  --shadow-lift: 0 14px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 18px 48px rgba(239, 111, 98, 0.30);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --blob-a: 62% 38% 54% 46% / 52% 44% 56% 48%;
  --blob-b: 44% 56% 38% 62% / 58% 42% 58% 42%;
  --blob-c: 54% 46% 62% 38% / 40% 60% 40% 60%;
  --blur-orb: 28px;
  --font-display: Monoton, "Jost", system-ui, sans-serif;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}

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

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}