/**
 * Setor Seguro — Design System (tokens globais)
 * Identidade: #FFD002 + #646569
 */
:root {
  --color-brand-yellow: #ffd002;
  --color-brand-yellow-light: #fff4b8;
  --color-brand-yellow-deep: #e6b800;
  --color-brand-gray: #646569;
  --color-brand-gray-dark: #2d2e32;
  --color-brand-gray-ink: #1a1b1f;
  --color-text-primary: #1a1b1f;
  --color-text-secondary: #646569;
  --color-text-inverse: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-dark: #0f172a;
  --color-surface-dark-soft: #1e293b;
  --color-line: rgba(100, 101, 105, 0.18);
  --color-line-strong: rgba(100, 101, 105, 0.32);
  --color-accent-blue: #0756c9;
  --color-accent-cyan: #22d3ee;
  --color-whatsapp: #25d366;

  --container-width: 1180px;
  --container-gutter: 20px;
  --section-spacing-desktop: clamp(72px, 8vw, 96px);
  --section-spacing-mobile: clamp(48px, 10vw, 64px);
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 40px rgba(26, 27, 31, 0.08);
  --shadow-medium: 0 22px 55px rgba(26, 27, 31, 0.12);
  --shadow-strong: 0 28px 70px rgba(2, 6, 23, 0.35);
  --transition-fast: 0.18s ease;
  --transition-standard: 0.32s ease;
  --transition-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 88px;
  --z-header: 100;
  --z-mega: 120;
  --z-dock: 90;
  --z-prefooter: 1;

  /* Bridge para tokens legados hn-* */
  --hn-yellow: var(--color-brand-yellow);
  --hn-yellow-deep: var(--color-brand-yellow-deep);
  --hn-ink: var(--color-text-primary);
  --hn-muted: var(--color-text-secondary);
  --hn-bg: var(--color-surface-muted);
  --hn-soft: #efeff0;
  --hn-surface: var(--color-surface);
  --hn-line: var(--color-line);
  --hn-blue: var(--color-accent-blue);
  --hn-cyan: var(--color-accent-cyan);
  --hn-dark: var(--color-brand-gray-ink);
  --hn-shadow: var(--shadow-medium);
  --hn-radius: var(--radius-card);
}

[data-theme="dark"] {
  --color-text-primary: #eff6ff;
  --color-text-secondary: #a8b5cc;
  --color-surface: #0b1730;
  --color-surface-muted: #020617;
  --color-surface-dark: #020617;
  --color-surface-dark-soft: #06122b;
  --color-line: rgba(148, 163, 184, 0.22);
  --hn-ink: var(--color-text-primary);
  --hn-muted: var(--color-text-secondary);
  --hn-bg: #020617;
  --hn-soft: #06122b;
  --hn-surface: #0b1730;
  --hn-line: var(--color-line);
  --hn-dark: #020617;
}

body.hn-site-page {
  background: var(--hn-bg);
  color: var(--hn-ink);
  font-family: var(--ss-font-body, "Inter", system-ui, sans-serif);
}

body.hn-site-page :where(h1, h2, h3, .section-title) {
  font-family: var(--ss-font-display, "Carnas Display", "Segoe UI", sans-serif);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

body.hn-site-page .hn-shell {
  width: min(var(--container-width), calc(100% - var(--container-gutter) * 2));
}