/* GENERATED from docs/design/tokens.json by packages/design-tokens. Do not edit. */
:root {
  --blue-50: #eaf3fd;
  --blue-100: #d3e6fa;
  --blue-500: #0094f7;
  --blue-700: #0057b8;
  --blue-800: #00468f;
  --blue-900: #003a78;
  --cyan-400: #02b1f8;
  --teal-50: #e6f7f5;
  --teal-400: #08ddc8;
  --teal-500: #00b8ad;
  --teal-700: #00756e;
  --gold-50: #fbf5e1;
  --gold-400: #d8b547;
  --gold-800: #7a5f0e;
  --navy-900: #123052;
  --slate-600: #526477;
  --slate-500: #7a8ba0;
  --slate-200: #d5dee8;
  --slate-100: #edf2f8;
  --slate-50: #f5f8fc;
  --white: #ffffff;
  --red-50: #fdecea;
  --red-700: #b42318;
  --amber-50: #fff4d6;
  --amber-800: #8a5a00;
  --bg: var(--slate-50);
  --surface: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-inverse: var(--navy-900);
  --text: var(--navy-900);
  --text-secondary: var(--slate-600);
  --text-inverse: var(--white);
  --text-link: var(--blue-700);
  --border: var(--slate-200);
  --border-strong: var(--slate-500);
  --action-primary: var(--blue-700);
  --action-primary-hover: var(--blue-800);
  --action-primary-pressed: var(--blue-900);
  --on-action-primary: var(--white);
  --action-secondary: var(--blue-50);
  --action-disabled: var(--slate-100);
  --focus-ring: var(--blue-700);
  --success: var(--teal-700);
  --success-bg: var(--teal-50);
  --warning: var(--amber-800);
  --warning-bg: var(--amber-50);
  --danger: var(--red-700);
  --danger-bg: var(--red-50);
  --info: var(--blue-700);
  --info-bg: var(--blue-50);
  --neutral: var(--slate-600);
  --neutral-bg: var(--slate-100);
  --brand-water: var(--blue-500);
  --brand-aqua: var(--teal-400);
  --brand-crown: var(--gold-400);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgba(18,48,82,0.08), 0 1px 3px rgba(18,48,82,0.06);
  --shadow-2: 0 4px 16px rgba(18,48,82,0.12);
  --shadow-3: 0 12px 40px rgba(18,48,82,0.24);
  --size-touch: 48px;
  --size-control-lg: 56px;
  --size-control-md: 48px;
  --size-control-sm: 36px;
  --size-icon: 24px;
  --size-column: 480px;
  --size-page: 1200px;
  --font-display: "Lexend", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
}

.text-display { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.text-title-lg { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; }
.text-title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; }
.text-title-sm { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.text-price { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; }
.text-body-lg { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-strong { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 700; }
.text-label { font-family: var(--font-text); font-size: 18px; line-height: 24px; font-weight: 700; }
.text-label-sm { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 700; }
.text-caption { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-code { font-family: var(--font-mono); font-size: 15px; line-height: 22px; font-weight: 400; }
.text-code-lg { font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.08em; }