/*
 * GENERATED by scripts/sync-design-tokens.ps1 from docs/design-system/tokens.json. DO NOT EDIT BY HAND.
 * Design system snapshot synced 2026-09-30 (live system: see docs/design-system/SYNC.md).
 * Values are exact. Anything tokens.json does not define lives in maluce-base.css instead.
 */
:root {
  --surface-header: #142440;
  --surface-deep: #0a1628;
  --surface-code: #0b1220;
  --surface-footer: #080f1e;
  --brand-fill: #c9a84c;
  --brand-light: #e8c96a;
  --brand-surface: rgba(201,168,76,0.12);
  --on-brand: #0f1f3d;
  --status-positive: #68d391;
  --status-positive-surface: rgba(72,187,120,0.15);
  --status-compliant-surface: rgba(13,110,71,0.15);
  --status-pending-surface: rgba(240,168,78,0.15);
  --status-blocked-surface: rgba(255,107,107,0.15);
  --status-neutral-surface: rgba(166,187,214,0.15);
  --overlay: rgba(8,11,20,0.6);
  --avatar-fill-gold: #8b6914;
  --avatar-fill-blue: #2b6cb0;
  --on-avatar: #ffffff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-pill: 20px;
  --radius-circle: 50%;
  --shadow: 0 20px 60px rgba(15,31,61,0.15);
  --shadow-lg: 0 40px 100px rgba(15,31,61,0.25);
  --avatar-gold: linear-gradient(135deg, #c9a84c, #8b6914);
  --avatar-blue: linear-gradient(135deg, #4a7fa5, #2b6cb0);
  --font-display: 'Manrope', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  --surface-page: #0f1f3d;
  --surface-100: #1a2f50;
  --ink: #ffffff;
  --ink-secondary: rgba(255,255,255,0.85);
  --ink-muted: rgba(255,255,255,0.55);
  --border: rgba(255,255,255,0.08);
  --border-strong: #737785;
  --brand: #c9a84c;
  --status-compliant: #68d391;
  --status-pending: #f0a84e;
  --status-blocked: #ff6b6b;
  --focus-ring: var(--brand);
  --surface-hover: #22375c;
  --surface-active: #0c1730;
  --ink-disabled: rgba(255,255,255,0.35);
  --border-disabled: rgba(255,255,255,0.06);
  --status-neutral: #a6bbd6;
}

[data-theme="light"] {
  --surface-page: #f7f8fa;
  --surface-100: #ffffff;
  --ink: #0f1f3d;
  --ink-secondary: #4a5568;
  --ink-muted: #718096;
  --border: #e8edf4;
  --border-strong: #8c9098;
  --brand: #8b6914;
  --status-compliant: #0d6e47;
  --status-pending: #8f5807;
  --status-blocked: #ad2d27;
  --focus-ring: var(--brand);
  --surface-hover: #f1f3f6;
  --surface-active: #e8edf4;
  --ink-disabled: rgba(15,31,61,0.35);
  --border-disabled: rgba(15,31,61,0.08);
  --status-neutral: #38536f;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
}

.price {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
}

.lead-hero {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

.lead-section {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
}

.button-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}

.code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}