/* Flodelica design tokens (from the Flodelica Design System, project/tokens.json).
   Light is the default; [data-theme="dark"] on <html> switches themes. */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/SpaceGrotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/SpaceGrotesk-600.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(/fonts/SpaceGrotesk-700.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/Inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/Inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/Inter-600.woff2) format("woff2"); }

:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-alt: #f3f5f9;
  --surface-raised: #ffffff;
  --surface-ink: #0e1726;
  --surface-ink-raised: #16213a;
  --ink: #0e1726;
  --ink-muted: #4b5567;
  --ink-subtle: #5b6475;
  --on-ink: #ffffff;
  --on-ink-muted: #c9d1de;
  --line: #e6e9ef;
  --line-strong: #8a93a6;
  --line-on-ink: #26324a;
  --brand: #2e5bff;
  --brand-hover: #1f45e0;
  --on-brand: #ffffff;
  --brand-soft: #eef2ff;
  --brand-strong: #1e3a8a;
  --brand-on-ink: #8fa8ff;
  --success: #0f766e;
  --success-soft: #dcfce7;
  --on-success-soft: #14532d;
  --focus: #2e5bff;
  /* Added for commerce (FRONTEND.md §7.2): error states, AA-checked. */
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --on-danger-soft: #7a271a;
  --shadow-card: 0 1px 2px rgba(14,23,38,0.06), 0 12px 32px rgba(14,23,38,0.08);
  --shadow-xs: 0 1px 2px rgba(14,23,38,0.06);
  color-scheme: light;
}

[data-theme="dark"] {
  --surface: #0b111d;
  --surface-alt: #121a2a;
  --surface-raised: #16213a;
  --surface-ink: #16213a;
  --surface-ink-raised: #1f2c4a;
  --ink: #f3f5f9;
  --ink-muted: #a7b0c0;
  --ink-subtle: #8b95a7;
  --on-ink: #ffffff;
  --on-ink-muted: #c9d1de;
  --line: #233049;
  --line-strong: #5f6b84;
  --line-on-ink: #2c3a5a;
  --brand: #6d8bff;
  --brand-hover: #8fa8ff;
  --on-brand: #0b111d;
  --brand-soft: #1a2547;
  --brand-strong: #c7d3ff;
  --brand-on-ink: #8fa8ff;
  --success: #34d399;
  --success-soft: #0f2e25;
  --on-success-soft: #86efac;
  --focus: #8fa8ff;
  --danger: #f97066;
  --danger-soft: #2d1414;
  --on-danger-soft: #fda29b;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.35);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  color-scheme: dark;
}

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-14: 56px; --space-16: 64px;
  --space-18: 72px; --space-28: 112px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;
  --container-max: 1240px;
  --control-lg: 52px; --control-md: 48px; --control-sm: 44px; --icon-tile: 48px;
}

.fl-display { font-family: var(--font-display); font-size: 74px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.fl-h2      { font-family: var(--font-display); font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.fl-stat    { font-family: var(--font-display); font-size: 64px; line-height: 1;    font-weight: 700; letter-spacing: -0.04em; }
.fl-price   { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.fl-h3      { font-family: var(--font-display); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.fl-title   { font-family: var(--font-display); font-size: 21px; line-height: 1.3;  font-weight: 600; letter-spacing: -0.01em; }
.fl-lead    { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; }
.fl-body-lg { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.fl-body    { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.fl-body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-weight: 400; }
.fl-label   { font-family: var(--font-sans); font-size: 13px; line-height: 1.25; font-weight: 600; letter-spacing: 0.08em; }
.fl-button  { font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 600; }