/* GENERATED by scripts/build_tokens.py from design-system/tokens.json. Do not edit by hand. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-Variable.woff2?v=b5fc9ca30033") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2?v=2b0e17466a96") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Italic-Variable.woff2?v=becd72591f4e") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2?v=290a5751f755") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #fcfcfc;
  --paper-raised: #ffffff;
  --blush: #fdece8;
  --hairline: #e6e6e6;
  --hairline-strong: #868686;
  --ink: #2c2c2c;
  --ink-secondary: #545454;
  --ink-muted: #686868;
  --coral: #f35d4a;
  --coral-tongue: #f36e5f;
  --coral-text: #bd3a2b;
  --on-coral: #242424;
  --focus: #bd3a2b;
  --success: #007191;
  --warning: #975a00;
  --danger: #a31b45;
  --shadow-pill: 0 0 0 1px #2c2c2c1a, 0 2px 4px #2c2c2c14, 0 10px 24px -6px #2c2c2c33;
  --shadow-card: 0 1px 2px #2c2c2c0f, 0 4px 16px -4px #2c2c2c1f;
  --shadow-focus: 0 0 0 2px #fcfcfc, 0 0 0 4px #bd3a2b;
  --shadow-lift: 0 2px 4px #2c2c2c14, 0 14px 30px -8px #2c2c2c33;

  --font-display: Fredoka, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-sans: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-system: -apple-system, "SF Pro Text", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-hover: 160ms;
  --duration-base: 280ms;
  --duration-reveal: 360ms;
  --duration-max: 400ms;
  --reveal-distance: 16px;
  --reveal-stagger: 60ms;
  --hover-lift: -2px;
  --marquee-duration: 44s;
}

/* Dark: follows the system unless the page pins light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #191514;
    --paper-raised: #241f1e;
    --blush: #31221f;
    --hairline: #342f2e;
    --hairline-strong: #787170;
    --ink: #f3efee;
    --ink-secondary: #c9c2c1;
    --ink-muted: #999291;
    --coral: #f66e5c;
    --coral-tongue: #fa8676;
    --coral-text: #f08878;
    --on-coral: #191514;
    --focus: #f08878;
    --success: #65b5d4;
    --warning: #ebae51;
    --danger: #f4688e;
    --shadow-pill: 0 0 0 1px #f3efee1a, 0 2px 4px #00000059, 0 12px 28px -6px #000000a6;
    --shadow-card: 0 1px 2px #00000066, 0 6px 20px -6px #00000099;
    --shadow-focus: 0 0 0 2px #191514, 0 0 0 4px #f08878;
    --shadow-lift: 0 2px 4px #00000066, 0 16px 34px -8px #000000b3;
  }
}

/* Dark, pinned with data-theme="dark" on the page or on a panel. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191514;
  --paper-raised: #241f1e;
  --blush: #31221f;
  --hairline: #342f2e;
  --hairline-strong: #787170;
  --ink: #f3efee;
  --ink-secondary: #c9c2c1;
  --ink-muted: #999291;
  --coral: #f66e5c;
  --coral-tongue: #fa8676;
  --coral-text: #f08878;
  --on-coral: #191514;
  --focus: #f08878;
  --success: #65b5d4;
  --warning: #ebae51;
  --danger: #f4688e;
  --shadow-pill: 0 0 0 1px #f3efee1a, 0 2px 4px #00000059, 0 12px 28px -6px #000000a6;
  --shadow-card: 0 1px 2px #00000066, 0 6px 20px -6px #00000099;
  --shadow-focus: 0 0 0 2px #191514, 0 0 0 4px #f08878;
  --shadow-lift: 0 2px 4px #00000066, 0 16px 34px -8px #000000b3;
}

/* Light, pinned with data-theme="light": art drawn for the paper ground keeps it in a dark page. */
[data-theme="light"] {
  color-scheme: light;
  --paper: #fcfcfc;
  --paper-raised: #ffffff;
  --blush: #fdece8;
  --hairline: #e6e6e6;
  --hairline-strong: #868686;
  --ink: #2c2c2c;
  --ink-secondary: #545454;
  --ink-muted: #686868;
  --coral: #f35d4a;
  --coral-tongue: #f36e5f;
  --coral-text: #bd3a2b;
  --on-coral: #242424;
  --focus: #bd3a2b;
  --success: #007191;
  --warning: #975a00;
  --danger: #a31b45;
  --shadow-pill: 0 0 0 1px #2c2c2c1a, 0 2px 4px #2c2c2c14, 0 10px 24px -6px #2c2c2c33;
  --shadow-card: 0 1px 2px #2c2c2c0f, 0 4px 16px -4px #2c2c2c1f;
  --shadow-focus: 0 0 0 2px #fcfcfc, 0 0 0 4px #bd3a2b;
  --shadow-lift: 0 2px 4px #2c2c2c14, 0 14px 30px -8px #2c2c2c33;
}

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

.display-l {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.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 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.body-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}

.app-title {
  font-family: var(--font-system);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

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

.app-callout {
  font-family: var(--font-system);
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
}

@media (max-width: 599.98px) {
  .display-xl { font-size: 44px; line-height: 48px; }
}