/* Generated by tools/build-brand-css.py from brand/tokens.json: don't edit by hand. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --surface: #F3EEE4;
  --surface-raised: #FBF8F2;
  --line: #D9D1C2;
  --ink: #1F2420;
  --ink-muted: #5C5F58;
  --carmine: #9B2335;
  --carmine-soft: #F1DADC;
  --on-carmine: #F3EEE4;
  --flax: #E3D6BE;
  --link: var(--carmine);
  --carmine-deep: #6E1824;   /* from the reference, not a token */
  --line-strong: #B9AF9C;   /* from the reference, not a token */
  --on-ink-muted: #B5B0A4;   /* from the reference, not a token */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --font-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.type-display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 64px;
  font-weight: 700;
}

.type-heading-1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
}

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

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

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

.type-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
}
a { color: var(--link); }
a:hover { color: var(--carmine-deep); }
:focus-visible { outline: 2px solid var(--carmine); outline-offset: 2px; }
img, svg { display: block; }