/* tokens.css: GENERATED by `python manage.py build_tokens` from design-system/tokens.json.
   Do not edit this file by hand; change tokens.json and run the command again. */

@layer tokens {
:root {
  --surface: #fdf8f1;
  --surface-raised: #ffffff;
  --surface-sunken: #f3ebdf;
  --ink: #1a1526;
  --ink-muted: #5c5470;
  --ink-subtle: #6e6683;
  --ink-fixed: #1a1526;
  --line: #e6dccb;
  --line-strong: #8f8577;
  --brand: #5b3ff5;
  --on-brand: #ffffff;
  --brand-deep: #4326e0;
  --brand-text: #4326e0;
  --brand-tint: #ece7ff;
  --sun: #ffcf3d;
  --pink: #ff9ad5;
  --tangerine: #ff7a3d;
  --mint: #8ee6c0;
  --sun-tint: #fff2c2;
  --pink-tint: #ffe0f1;
  --tangerine-tint: #ffe3d3;
  --mint-tint: #dcf7ea;
  --success: #1b7a45;
  --success-text: #1b7a45;
  --warning: #9a5400;
  --warning-text: #9a5400;
  --danger: #c9243a;
  --danger-text: #c9243a;
  --danger-tint: #ffe6ea;
  --on-status: #ffffff;
  --focus: #5b3ff5;
  --shadow-ink: #1a1526;
  --scrim: #1a1526b3;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --sticker: 4px 4px 0 0 #1a1526;
  --sticker-sm: 2px 2px 0 0 #1a1526;
  --float: 0 8px 24px -8px #1a152640;
  --none: 0 0 0 0 #00000000;

  --border-hair: 1px;
  --border-ink: 2px;
  --border-focus: 3px;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --t-display-xl-family: var(--font-display);
  --t-display-xl-size: 72px;
  --t-display-xl-line: 0.95;
  --t-display-xl-weight: 800;
  --t-display-xl-tracking: -0.03em;
  --t-display-lg-family: var(--font-display);
  --t-display-lg-size: 48px;
  --t-display-lg-line: 1.0;
  --t-display-lg-weight: 800;
  --t-display-lg-tracking: -0.025em;
  --t-display-md-family: var(--font-display);
  --t-display-md-size: 32px;
  --t-display-md-line: 1.1;
  --t-display-md-weight: 800;
  --t-display-md-tracking: -0.02em;
  --t-display-sm-family: var(--font-display);
  --t-display-sm-size: 24px;
  --t-display-sm-line: 1.15;
  --t-display-sm-weight: 700;
  --t-display-sm-tracking: -0.015em;

  --t-title-family: var(--font-sans);
  --t-title-size: 18px;
  --t-title-line: 24px;
  --t-title-weight: 700;
  --t-title-tracking: normal;
  --t-body-lg-family: var(--font-sans);
  --t-body-lg-size: 18px;
  --t-body-lg-line: 28px;
  --t-body-lg-weight: 400;
  --t-body-lg-tracking: normal;
  --t-body-family: var(--font-sans);
  --t-body-size: 15px;
  --t-body-line: 22px;
  --t-body-weight: 400;
  --t-body-tracking: normal;
  --t-body-strong-family: var(--font-sans);
  --t-body-strong-size: 15px;
  --t-body-strong-line: 22px;
  --t-body-strong-weight: 600;
  --t-body-strong-tracking: normal;
  --t-label-family: var(--font-sans);
  --t-label-size: 13px;
  --t-label-line: 18px;
  --t-label-weight: 600;
  --t-label-tracking: 0.01em;
  --t-caption-family: var(--font-sans);
  --t-caption-size: 12px;
  --t-caption-line: 16px;
  --t-caption-weight: 500;
  --t-caption-tracking: normal;

  --t-button-family: var(--font-sans);
  --t-button-size: 15px;
  --t-button-line: 20px;
  --t-button-weight: 700;
  --t-button-tracking: normal;
  --t-button-sm-family: var(--font-sans);
  --t-button-sm-size: 13px;
  --t-button-sm-line: 16px;
  --t-button-sm-weight: 700;
  --t-button-sm-tracking: normal;

  --t-hand-family: var(--font-hand);
  --t-hand-size: 22px;
  --t-hand-line: 1.1;
  --t-hand-weight: 600;
  --t-hand-tracking: normal;
}

/* Dark theme values (not used in v1: the site ships light only). */
:root[data-theme="dark"] {
  --surface: #14111c;
  --surface-raised: #1e1a2a;
  --surface-sunken: #0d0a13;
  --ink: #f6f1e9;
  --ink-muted: #b3abc4;
  --ink-subtle: #9a92ad;
  --line: #2e283d;
  --line-strong: #7d7494;
  --brand-deep: #7c66ff;
  --brand-text: #a99cff;
  --brand-tint: #2a2347;
  --sun-tint: #3d3210;
  --pink-tint: #3d1f33;
  --tangerine-tint: #3f2216;
  --mint-tint: #123326;
  --success: #2fbf71;
  --success-text: #5fd68f;
  --warning: #e8a63c;
  --warning-text: #ffb84d;
  --danger: #e0455a;
  --danger-text: #ff7b8a;
  --danger-tint: #421a21;
  --on-status: #14111c;
  --focus: #a99cff;
  --shadow-ink: #000000;
  --scrim: #000000b3;
  --sticker: 4px 4px 0 0 #000000;
  --sticker-sm: 2px 2px 0 0 #000000;
  --float: 0 8px 24px -8px #00000099;
}

.t-display-xl {
  font-family: var(--t-display-xl-family);
  font-size: var(--t-display-xl-size);
  line-height: var(--t-display-xl-line);
  font-weight: var(--t-display-xl-weight);
  letter-spacing: var(--t-display-xl-tracking);
}
.t-display-lg {
  font-family: var(--t-display-lg-family);
  font-size: var(--t-display-lg-size);
  line-height: var(--t-display-lg-line);
  font-weight: var(--t-display-lg-weight);
  letter-spacing: var(--t-display-lg-tracking);
}
.t-display-md {
  font-family: var(--t-display-md-family);
  font-size: var(--t-display-md-size);
  line-height: var(--t-display-md-line);
  font-weight: var(--t-display-md-weight);
  letter-spacing: var(--t-display-md-tracking);
}
.t-display-sm {
  font-family: var(--t-display-sm-family);
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-line);
  font-weight: var(--t-display-sm-weight);
  letter-spacing: var(--t-display-sm-tracking);
}
.t-title {
  font-family: var(--t-title-family);
  font-size: var(--t-title-size);
  line-height: var(--t-title-line);
  font-weight: var(--t-title-weight);
  letter-spacing: var(--t-title-tracking);
}
.t-body-lg {
  font-family: var(--t-body-lg-family);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-line);
  font-weight: var(--t-body-lg-weight);
  letter-spacing: var(--t-body-lg-tracking);
}
.t-body {
  font-family: var(--t-body-family);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  letter-spacing: var(--t-body-tracking);
}
.t-body-strong {
  font-family: var(--t-body-strong-family);
  font-size: var(--t-body-strong-size);
  line-height: var(--t-body-strong-line);
  font-weight: var(--t-body-strong-weight);
  letter-spacing: var(--t-body-strong-tracking);
}
.t-label {
  font-family: var(--t-label-family);
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
}
.t-caption {
  font-family: var(--t-caption-family);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  font-weight: var(--t-caption-weight);
  letter-spacing: var(--t-caption-tracking);
}
.t-button {
  font-family: var(--t-button-family);
  font-size: var(--t-button-size);
  line-height: var(--t-button-line);
  font-weight: var(--t-button-weight);
  letter-spacing: var(--t-button-tracking);
}
.t-button-sm {
  font-family: var(--t-button-sm-family);
  font-size: var(--t-button-sm-size);
  line-height: var(--t-button-sm-line);
  font-weight: var(--t-button-sm-weight);
  letter-spacing: var(--t-button-sm-tracking);
}
.t-hand {
  font-family: var(--t-hand-family);
  font-size: var(--t-hand-size);
  line-height: var(--t-hand-line);
  font-weight: var(--t-hand-weight);
  letter-spacing: var(--t-hand-tracking);
}
}