/* Tattva Brand Kit: design tokens. Generated from tokens.json. Light is the default; add data-theme="dark" (the Navy theme) to <html> or to a section. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --surface: #ffffff;
  --surface-muted: #f2f7f8;
  --surface-card: #ffffff;
  --surface-inverse: #0b2f53;
  --ink: #0b2f53;
  --ink-muted: #3f5e7a;
  --ink-inverse: #ffffff;
  --accent: #0b99a3;
  --accent-ink: #087a82;
  --on-accent: #ffffff;
  --sun: #ffc83d;
  --on-sun: #0b2f53;
  --highlight-ink: #0b2f53;
  --highlight-fill: #ffc83d;
  --line: #d8dee3;
  --line-strong: #6f8599;
  --focus: #087a82;
  --danger: #b42318;
  --navy: #0b2f53;
  --teal: #0b99a3;
  --soft-teal: #62b6b2;
  --mist: #f2f7f8;
  --white: #ffffff;
  --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: 96px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --logo-header: 44px;
  --logo-min: 28px;
  --partner-logo: 64px;
  --icon-sm: 20px;
  --icon-md: 28px;
  --icon-lg: 48px;
  --sticker: 132px;
  --content-max: 1200px;
  --measure: 680px;
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  --surface: #0b2f53;
  --surface-muted: #0f3860;
  --surface-card: #14406a;
  --surface-inverse: #f2f7f8;
  --ink: #ffffff;
  --ink-muted: #cfe3e6;
  --ink-inverse: #0b2f53;
  --accent: #62b6b2;
  --accent-ink: #74c4c0;
  --on-accent: #0b2f53;
  --highlight-ink: #ffc83d;
  --highlight-fill: #ffc83d00;
  --line: #415d79;
  --line-strong: #8597a9;
  --focus: #ffc83d;
  --danger: #ff8a7a;
}

/* Type styles */
.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.92; font-weight: 800; letter-spacing: -0.035em; }
.display-lg { font-family: var(--font-display); font-size: 64px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; }
.heading-1 { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.heading-2 { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.heading-3 { font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.price { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.button { font-family: var(--font-display); font-size: 17px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-family: var(--font-body); font-size: 21px; line-height: 1.45; font-weight: 500; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; }
.body-strong { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 700; }
.body-sm { font-family: var(--font-body); font-size: 15px; line-height: 1.5; font-weight: 400; }
.fine { font-family: var(--font-body); font-size: 13px; line-height: 1.45; font-weight: 500; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.tag { font-family: var(--font-mono); font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 640px) {
  .display-xl { font-size: 64px; line-height: .95; }
  .display-lg { font-size: 48px; }
  .heading-1 { font-size: 36px; }
}

body { background: var(--surface); color: var(--ink); font-family: var(--font-body); }