:root {
  color-scheme: light;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-neutral: #e8edf2;
  --color-ink: #2b2f36;
  --color-muted: #4a5160;
  --color-brand: #0b2545;
  --color-brand-strong: #0a0a0a;
  --color-accent: #1d4ed8;
  --color-accent-strong: #1e3a8a;
  --color-accent-ink: #ffffff;
  --color-cta: #1d4ed8;
  --color-cta-strong: #1e3a8a;
  --color-info: #1d4ed8;
  --color-on-dark: #e8edf2;
  --color-invert-bg: #0a0a0a;
  --color-invert-ink: #e8edf2;
  --color-invert-muted: color-mix(in srgb, #e8edf2 78%, transparent);
  --color-invert-border: color-mix(in srgb, #e8edf2 16%, transparent);
  --color-invert-btn: #ffffff;
  --color-invert-btn-ink: #0b2545;
  --color-border: color-mix(in srgb, #0b2545 14%, #e8edf2);
  --color-ok: #15803d;
  --color-danger: #b42318;
  --color-warn: #92400e;
  --color-whatsapp: #25d366;
  --gradient-brand: linear-gradient(135deg, #0a0a0a 0%, #0b2545 58%, #1d4ed8 100%);
  --gradient-brand-soft: linear-gradient(
    135deg,
    color-mix(in srgb, #0b2545 10%, transparent),
    color-mix(in srgb, #1d4ed8 10%, transparent)
  );
  --color-hero-glow: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --color-icon-bg: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --color-status-ok-bg: color-mix(in srgb, var(--color-ok) 12%, var(--color-surface));
  --color-status-danger-bg: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  --shadow-soft: 0 12px 32px color-mix(in srgb, var(--color-brand) 8%, transparent);
  --logo-mark: url("../img/logo-mark.svg");
  --hero-grain-blend: multiply;
  --hero-grain-opacity: 0.18;
  --hero-visual-shadow: 0 28px 48px color-mix(in srgb, var(--color-brand) 22%, transparent);

  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-small: 0.875rem;
  --text-nav: 0.8125rem;
  --text-footer: 1rem;
  --text-body: 1.0625rem;
  --text-intro: clamp(1.1rem, 1.5vw, 1.2rem);
  --text-lead: clamp(1.125rem, 1.7vw, 1.3125rem);
  --text-h3: clamp(1.2rem, 1.5vw, 1.375rem);
  --text-h2: clamp(1.625rem, 2.8vw, 2.125rem);
  --text-h1: clamp(2.125rem, 4.4vw, 3.125rem);
  --text-display: clamp(2.5rem, 6.2vw, 3.85rem);
  --leading-body: 1.65;
  --leading-intro: 1.55;
  --leading-heading: 1.18;
  --tracking-display: -0.04em;
  --tracking-tight: -0.03em;
  --tracking-caps: 0.06em;
  --measure: 40rem;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 8vw, 6.5rem);

  --container: 70rem;
  --header-height: calc(4.5rem + env(safe-area-inset-top, 0px));
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --focus-ring: 2px solid var(--color-accent);
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #070b12;
  --color-surface: #0e1622;
  --color-neutral: #152033;
  --color-ink: #e8edf2;
  --color-muted: #9aa8b8;
  --color-brand: #93c5fd;
  --color-brand-strong: #f8fafc;
  --color-accent: #60a5fa;
  --color-accent-strong: #93c5fd;
  --color-accent-ink: #0a0a0a;
  --color-cta: #1d4ed8;
  --color-cta-strong: #2563eb;
  --color-info: #60a5fa;
  --color-on-dark: #e8edf2;
  --color-invert-bg: #0a0a0a;
  --color-invert-ink: #e8edf2;
  --color-invert-muted: color-mix(in srgb, #e8edf2 78%, transparent);
  --color-invert-border: color-mix(in srgb, #e8edf2 16%, transparent);
  --color-invert-btn: #ffffff;
  --color-invert-btn-ink: #0b2545;
  --color-border: #1e3348;
  --color-ok: #4ade80;
  --color-danger: #f87171;
  --color-warn: #fbbf24;
  --color-hero-glow: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --color-icon-bg: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  --color-status-ok-bg: color-mix(in srgb, var(--color-ok) 16%, var(--color-surface));
  --color-status-danger-bg: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  --shadow-soft: 0 16px 40px rgb(0 0 0 / 28%);
  --logo-mark: url("../img/logo-mark-on-dark.svg");
  --hero-grain-blend: overlay;
  --hero-grain-opacity: 0.12;
  --hero-visual-shadow: 0 28px 56px rgb(0 0 0 / 42%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #070b12;
    --color-surface: #0e1622;
    --color-neutral: #152033;
    --color-ink: #e8edf2;
    --color-muted: #9aa8b8;
    --color-brand: #93c5fd;
    --color-brand-strong: #f8fafc;
    --color-accent: #60a5fa;
    --color-accent-strong: #93c5fd;
    --color-accent-ink: #0a0a0a;
    --color-cta: #1d4ed8;
    --color-cta-strong: #2563eb;
    --color-info: #60a5fa;
    --color-on-dark: #e8edf2;
    --color-invert-bg: #0a0a0a;
    --color-invert-ink: #e8edf2;
    --color-invert-muted: color-mix(in srgb, #e8edf2 78%, transparent);
    --color-invert-border: color-mix(in srgb, #e8edf2 16%, transparent);
    --color-invert-btn: #ffffff;
    --color-invert-btn-ink: #0b2545;
    --color-border: #1e3348;
    --color-ok: #4ade80;
    --color-danger: #f87171;
    --color-warn: #fbbf24;
    --color-hero-glow: color-mix(in srgb, var(--color-accent) 14%, transparent);
    --color-icon-bg: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    --color-status-ok-bg: color-mix(in srgb, var(--color-ok) 16%, var(--color-surface));
    --color-status-danger-bg: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
    --shadow-soft: 0 16px 40px rgb(0 0 0 / 28%);
    --logo-mark: url("../img/logo-mark-on-dark.svg");
    --hero-grain-blend: overlay;
    --hero-grain-opacity: 0.12;
    --hero-visual-shadow: 0 28px 56px rgb(0 0 0 / 42%);
  }
}