/* Sintsoft · Horizonte Cobalto — tokens de diseño (variables CSS). Fuente: tokens/tokens.json */
:root, [data-theme="light"] {
  --surface-0: #ffffff;
  --surface-50: #f5f9ff;
  --surface-100: #e6f0ff;
  --surface-200: #d6e8ff;
  --ink: #0a2150;
  --ink-muted: #3a4a6b;
  --brand: #1565d8;
  --on-brand: #ffffff;
  --navy: #0a2a6b;
  --on-navy: #ffffff;
  --navy-deep: #0d3f9e;
  --glow: #3c9bff;
  --sky: #7fd4ff;
  --pixel-orange: #f28c28;
  --pixel-green: #4da82c;
  --line: #c9dbf5;
  --control-border: #5e7bb4;
  --danger: #b42318;
  --success: #067647;
  --focus-ring: var(--brand);
  --shadow-button: 0 14px 30px rgba(21, 101, 216, 0.35);
  --shadow-button-navy: 0 10px 26px rgba(10, 60, 160, 0.28);
  --shadow-soft: 0 24px 60px rgba(16, 70, 170, 0.12);
  --shadow-card: 0 22px 50px rgba(16, 70, 170, 0.18);
  --shadow-stat: 0 18px 44px rgba(16, 70, 170, 0.1);
}
[data-theme="dark"] {
  --focus-ring: var(--brand);
  --surface-0: #071330;
  --surface-50: #0b1b40;
  --surface-100: #102553;
  --surface-200: #17306a;
  --ink: #eaf2ff;
  --ink-muted: #b7c6e6;
  --brand: #5aa2ff;
  --on-brand: #071330;
  --navy: #234c9e;
  --navy-deep: #2f63c6;
  --line: #2a4585;
  --control-border: #7f9bd6;
  --danger: #ff8a80;
  --success: #5dd39e;
}
:root {
  --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;
  --space-10: 140px;
  --container-max: 1440px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --hero-wash: linear-gradient(100deg, #ffffff 0%, #f5f9ff 42%, #d6e8ff 100%);
  --band-navy: linear-gradient(90deg, #0a2a6b 0%, #0d3f9e 100%);
  --cta-blue: linear-gradient(100deg, #0a2a6b 0%, #1565d8 100%);
  --duration-press: 160ms;
  --duration-card: 220ms;
  --duration-enter: 700ms;
  --duration-float: 7s;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --font-sans: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.display-xl { font-family: var(--font-sans); font-size: 92px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; }
.display-lg { font-family: var(--font-sans); font-size: 68px; line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
.display-md { font-family: var(--font-sans); font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.figure { font-family: var(--font-sans); font-size: 150px; line-height: 0.9; font-weight: 900; letter-spacing: -0.05em; }
.title-lg { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.title-md { font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.title-sm { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 22px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 16px; line-height: 1.2; font-weight: 700; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }