/* --- SISTEMA DE DESIGN: TOKENS ---
   Único lugar com valores de cor, tipo, espaço, raio, sombra e duração.
   Tema claro em :root. Tema escuro: pela preferência do sistema quando não há
   escolha salva, ou por data-theme="dark" em <html> (posto por theme.js).
   Os componentes de style.css só leem estes tokens. */

:root {
  color-scheme: light;

  /* Marca (cores do logo) */
  --brand-red: #ef3b47;
  --brand-orange: #ff8a1f;
  --brand-gradient: linear-gradient(120deg, var(--brand-red), var(--brand-orange));

  /* Cores semânticas */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-inverse: #0b1220;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-on-inverse: #f1f5f9;
  --color-text-muted-on-inverse: #a3afc2;
  --color-border: #e2e8f0;
  --color-accent-text: #c81e30;
  --color-cta: #d92d3a;
  --color-cta-hover: #b91c2e;
  --color-cta-text: #ffffff;
  --color-focus: #c2570c;

  /* Cabeçalho: superfície inversa translúcida, igual nos dois temas */
  --color-header-bg: rgba(11, 18, 32, 0.82);
  --color-header-bg-scrolled: rgba(11, 18, 32, 0.94);

  /* Complementares: superfície inversa e decoração (iguais nos dois temas) */
  --color-surface-inverse-raised: #131c2e;
  --color-border-on-inverse: rgba(255, 255, 255, 0.09);
  --color-border-on-inverse-strong: rgba(255, 255, 255, 0.22);
  --color-border-on-inverse-hover: rgba(255, 255, 255, 0.5);
  --color-inverse-fill-1: rgba(255, 255, 255, 0.04);
  --color-inverse-fill-2: rgba(255, 255, 255, 0.1);
  --color-inverse-fill-3: rgba(255, 255, 255, 0.14);
  --color-accent-on-inverse-soft: #ffb36b;
  --color-success-on-inverse: #4ade80;
  --color-success-tint: #dcfce7;
  --color-glow-red: rgba(239, 59, 71, 0.3);
  --color-glow-red-soft: rgba(239, 59, 71, 0.18);
  --color-glow-orange: rgba(255, 138, 31, 0.2);
  --color-chart-fade: rgba(239, 59, 71, 0.55);
  --color-tint-red: rgba(239, 59, 71, 0.1);
  --color-tint-orange: rgba(255, 138, 31, 0.14);
  --color-border-accent: rgba(239, 59, 71, 0.32);
  --color-border-input: #7c8799;
  --color-whatsapp: #1da851;
  --color-on-whatsapp: #ffffff;
  --color-media-warm-start: #fff1ed;
  --color-media-warm-end: #ffe3d1;
  --color-media-cool: #f1f8fd;
  --color-media-dark: #1d2638;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.35);
  --shadow-cta: 0 8px 24px rgba(217, 45, 58, 0.3);
  --shadow-media: 0 12px 30px rgba(217, 45, 58, 0.15);
  --shadow-focus-ring: 0 0 0 4px rgba(217, 45, 58, 0.12);
  --shadow-whatsapp: 0 10px 30px rgba(29, 168, 81, 0.4);
  --shadow-panel: 0 24px 40px rgba(2, 6, 23, 0.45);

  /* Tipografia */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.4rem, 2.2vw, 1.75rem);
  --text-3xl: clamp(1.8rem, 3.4vw, 2.6rem);
  --text-4xl: clamp(2.2rem, 4.6vw, 3.6rem);
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.15;
  --leading: 1.65;

  /* Espaço (base 4 px) */
  --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: 128px;

  /* Raio */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Tamanhos */
  --size-touch: 44px;
  --size-icon: 20px;

  /* Movimento */
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;
  --duration-ambient: 6s;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tema escuro pela preferência do sistema, sem escolha salva */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0b1220;
    --color-bg-alt: #131c2e;
    --color-surface: #131c2e;
    --color-surface-inverse: #070b14;
    --color-text: #f1f5f9;
    --color-text-muted: #a3afc2;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-accent-text: #ff6b74;
    --color-focus: #ff8a1f;
    --color-media-warm-start: #2a1c1f;
    --color-media-warm-end: #33231b;
    --color-media-cool: #16212f;
    --shadow-sm: none;
    --shadow: none;
  }
}

/* Tema escuro escolhido pelo visitante */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b1220;
  --color-bg-alt: #131c2e;
  --color-surface: #131c2e;
  --color-surface-inverse: #070b14;
  --color-text: #f1f5f9;
  --color-text-muted: #a3afc2;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-accent-text: #ff6b74;
  --color-focus: #ff8a1f;
  --color-media-warm-start: #2a1c1f;
  --color-media-warm-end: #33231b;
  --color-media-cool: #16212f;
  --shadow-sm: none;
  --shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-ambient: 0.01ms;
  }
}