/* Amélie Beerens design tokens. Generated from tokens.json. Themes: [data-theme=operator] (default), [data-theme=brazen]. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

:root, [data-theme="operator"] {
  --pink: #f74897;
  --ink: #21232c;
  --paper: #f1f3f8;
  --red: #fb4951;
  --red-text: #e0050f;
  --blush: #fd9cbf;
  --white: #ffffff;
  --surface: var(--white);
  --surface-alt: var(--paper);
  --surface-ink: var(--ink);
  --on-ink: var(--paper);
  --text: var(--ink);
  --text-muted: rgba(33, 35, 44, 0.78);
  --display: var(--red);
  --accent: var(--red);
  --on-accent: var(--ink);
  --band: var(--red);
  --on-band: var(--ink);
  --tint: var(--blush);
  --signal: var(--red);
  --rule: rgba(33, 35, 44, 0.16);
  --rule-strong: var(--ink);
  --focus-ring: var(--ink);
}

[data-theme="brazen"] {
  --surface: var(--pink);
  --surface-alt: var(--blush);
  --surface-ink: var(--ink);
  --on-ink: var(--pink);
  --text: var(--ink);
  --text-muted: var(--ink);
  --display: var(--ink);
  --accent: var(--ink);
  --on-accent: var(--pink);
  --band: var(--ink);
  --on-band: var(--pink);
  --tint: var(--blush);
  --signal: var(--ink);
  --rule: rgba(33, 35, 44, 0.28);
  --rule-strong: var(--ink);
  --focus-ring: var(--ink);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 160px;
  --radius-none: 0;
  --radius-button: 999px;
  --radius-tile: 20px;
  --radius-panel: 24px;
  --grid-columns: 12;
  --grid-margin: 96px;
  --grid-max: 1440px;
  --measure: 68ch;
  --hero-split: 5 / 7;
  --hairline: 1px;
  --signature-gradient: linear-gradient(90deg, #f74897 0%, #fb4951 100%);
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* Type styles */
.display-hero { font-family: var(--font-serif); font-size: 76px; line-height: 80px; font-weight: 500; letter-spacing: -0.015em; font-optical-sizing: auto; }
.display-section { font-family: var(--font-serif); font-size: 48px; line-height: 54px; font-weight: 500; letter-spacing: -0.01em; font-optical-sizing: auto; }
.display-title { font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 500; font-optical-sizing: auto; }
.numeral { font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 400; font-optical-sizing: auto; }
.quote { font-family: var(--font-serif); font-size: 26px; line-height: 36px; font-weight: 400; font-style: italic; font-optical-sizing: auto; }
.eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.beat { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 500; }
.lead { font-family: var(--font-sans); font-size: 21px; line-height: 32px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }