/* Generated by tokens/build.py from tokens.json. Do not edit by hand. */
/* Breakpoints (use literally in media queries): sm 640px, md 960px, lg 1280px */

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

:root {
  /* Palette: sRGB fallbacks */
  --color-accent-pink: #FF63AF;
  --color-accent-magenta: #CD29E0;
  --color-accent-purple: #7A08F9;
  --color-neutral-0: #FEFDFF;
  --color-neutral-50: #F7F6FA;
  --color-neutral-100: #EFEDF2;
  --color-neutral-200: #DFDDE2;
  --color-neutral-300: #C5C2CA;
  --color-neutral-400: #A09CA6;
  --color-neutral-500: #7C7884;
  --color-neutral-600: #5D5864;
  --color-neutral-700: #423D49;
  --color-neutral-800: #2D2935;
  --color-neutral-900: #201B28;
  --color-neutral-950: #181320;

  --font-family-base: Lexend, system-ui, -apple-system, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-display: 700 3.5rem/1.1 var(--font-family-base);
  --tracking-display: -0.02em;
  --font-h1: 600 2.5rem/1.15 var(--font-family-base);
  --tracking-h1: -0.01em;
  --font-h2: 600 2rem/1.2 var(--font-family-base);
  --tracking-h2: 0em;
  --font-h3: 600 1.5rem/1.3 var(--font-family-base);
  --tracking-h3: 0em;
  --font-body-large: 300 1.25rem/1.6 var(--font-family-base);
  --tracking-body-large: 0em;
  --font-body: 300 1rem/1.6 var(--font-family-base);
  --tracking-body: 0em;
  --font-small: 400 0.875rem/1.5 var(--font-family-base);
  --tracking-small: 0em;
  --font-label: 500 0.8125rem/1.4 var(--font-family-base);
  --tracking-label: 0.06em;
  --case-label: uppercase;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --layout-content-max: 70rem;
  --layout-prose-max: 42.5rem;
  --layout-gutter: 1rem;
}

/* Palette: full OKLCH / P3 where supported */
@supports (color: oklch(0% 0 0)) {
  :root {
    --color-accent-pink: oklch(72.0% 0.253 353);
    --color-accent-magenta: oklch(62.0% 0.269 323);
    --color-accent-purple: oklch(52.0% 0.286 293);
    --color-neutral-0: oklch(99.5% 0.004 302);
    --color-neutral-50: oklch(97.5% 0.005 302);
    --color-neutral-100: oklch(95.0% 0.006 302);
    --color-neutral-200: oklch(90.0% 0.008 302);
    --color-neutral-300: oklch(82.0% 0.011 302);
    --color-neutral-400: oklch(70.0% 0.015 302);
    --color-neutral-500: oklch(58.0% 0.019 302);
    --color-neutral-600: oklch(47.0% 0.02 302);
    --color-neutral-700: oklch(37.0% 0.021 302);
    --color-neutral-800: oklch(29.0% 0.023 302);
    --color-neutral-900: oklch(23.5% 0.025 302);
    --color-neutral-950: oklch(19.9% 0.0265 302);
  }
}

/* Theme: light is the default */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--color-neutral-0);
  --surface: var(--color-neutral-50);
  --border: var(--color-neutral-200);
  --text: var(--color-neutral-950);
  --text-muted: var(--color-neutral-600);
  --accent: var(--color-accent-pink);
  --on-accent: var(--color-neutral-950);
  --link: var(--color-accent-purple);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--color-neutral-950);
    --surface: var(--color-neutral-900);
    --border: var(--color-neutral-800);
    --text: var(--color-neutral-50);
    --text-muted: var(--color-neutral-400);
    --accent: var(--color-accent-pink);
    --on-accent: var(--color-neutral-950);
    --link: var(--color-accent-pink);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-neutral-950);
  --surface: var(--color-neutral-900);
  --border: var(--color-neutral-800);
  --text: var(--color-neutral-50);
  --text-muted: var(--color-neutral-400);
  --accent: var(--color-accent-pink);
  --on-accent: var(--color-neutral-950);
  --link: var(--color-accent-pink);
}