/* GENERATED by tools/build-tokens.mjs from design-system/tokens.json — do not edit. */
/* Cake SMSF tokens, version 2. */

:root {
  color-scheme: light dark;
  --surface: #ffffff;
  --surface-alt: #faf5f6;
  --surface-raised: #ffffff;
  --line: #ecdfe3;
  --line-strong: #7c8390;
  --ink-heading: #232222;
  --ink: #353a49;
  --ink-muted: #5b6270;
  --maroon: #67222f;
  --maroon-deep: #67222f;
  --on-maroon: #ffffff;
  --on-maroon-muted: #e6c9d0;
  --brand: #e3126e;
  --brand-hover: #c10e5d;
  --brand-text: #c40d5f;
  --brand-soft: #fff3f7;
  --on-brand: #ffffff;
  --brand-on-maroon: #ff8fb8;
  --accent: #00779f;
  --accent-bright: #00aeef;
  --accent-soft: #e6f7fd;
  --accent-line: #b3e3f7;
  --pink: #ef7085;
  --success: #1f7a48;
  --danger: #b42318;
  --link: var(--brand-text);
  --focus-ring: var(--brand);
  --social-blue: #00aeef;
  --shadow-card: 0 1px 2px rgba(26, 34, 51, 0.06), 0 8px 24px rgba(26, 34, 51, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --measure: 1120px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-sans: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: Roboto, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --surface: #1a1114;
  --surface-alt: #231619;
  --surface-raised: #2a1c20;
  --line: #3d2a30;
  --line-strong: #7d6a70;
  --ink-heading: #ffffff;
  --ink: #f7edf0;
  --ink-muted: #c3adb4;
  --maroon: #f7edf0;
  --maroon-deep: #3a1520;
  --on-maroon: #f7edf0;
  --on-maroon-muted: #d9bfc7;
  --brand: #ff6fa6;
  --brand-hover: #ff8fb8;
  --brand-text: #ff6fa6;
  --brand-soft: #4a1a30;
  --on-brand: #1a1114;
  --brand-on-maroon: #ff8fb8;
  --accent: #5ec8e8;
  --accent-bright: #00aeef;
  --accent-soft: #10323f;
  --accent-line: #1d4d5e;
  --pink: #f28ba0;
  --success: #5fcf8f;
  --danger: #f28b82;
  --link: var(--brand-text);
  --focus-ring: var(--brand);
  --social-blue: #00aeef;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --surface: #1a1114;
  --surface-alt: #231619;
  --surface-raised: #2a1c20;
  --line: #3d2a30;
  --line-strong: #7d6a70;
  --ink-heading: #ffffff;
  --ink: #f7edf0;
  --ink-muted: #c3adb4;
  --maroon: #f7edf0;
  --maroon-deep: #3a1520;
  --on-maroon: #f7edf0;
  --on-maroon-muted: #d9bfc7;
  --brand: #ff6fa6;
  --brand-hover: #ff8fb8;
  --brand-text: #ff6fa6;
  --brand-soft: #4a1a30;
  --on-brand: #1a1114;
  --brand-on-maroon: #ff8fb8;
  --accent: #5ec8e8;
  --accent-bright: #00aeef;
  --accent-soft: #10323f;
  --accent-line: #1d4d5e;
  --pink: #f28ba0;
  --success: #5fcf8f;
  --danger: #f28b82;
  --link: var(--brand-text);
  --focus-ring: var(--brand);
  --social-blue: #00aeef;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.display-1 { font-family: var(--font-display); font-size: 60px; line-height: 66px; font-weight: 700; letter-spacing: -0.015em; }
.display-2 { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.005em; }
.heading { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; }
.price { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.button { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }

@media (max-width: 768px) {
  .display-1 { font-size: 44px; line-height: 50px; }
  .display-2 { font-size: 30px; line-height: 36px; }
}