/* ============================================================
   Design Tokens — Império Global
   Base para futuro design system oficial.
   Toda cor, tipografia, spacing, radius e sombra vive aqui.
   Nenhum valor hardcoded nos componentes.
   ============================================================ */

:root {
  /* ---------- CORES: MARCA IMPÉRIO ---------- */
  --cor-navy: #0E2A5E;              /* Primária */
  --cor-navy-escuro: #0A1930;       /* Texto sobre claro, quase-preto */
  --cor-navy-medio: #1B4F9C;        /* Secundária, gradiente CTA */
  --cor-navy-claro: #4FA8E0;        /* Brilho, detalhes, glow */

  /* Aliases semânticos (usar preferencialmente) */
  --cor-primaria: var(--cor-navy);
  --cor-primaria-hover: var(--cor-navy-escuro);
  --cor-acento: var(--cor-navy-claro);

  /* ---------- CORES: NEUTROS ---------- */
  --cor-texto: var(--cor-navy-escuro);
  --cor-texto-suave: #4B5563;
  --cor-texto-fraco: #94A3B8;
  --cor-fundo: #FFFFFF;
  --cor-fundo-suave: #F4F7FB;
  --cor-borda: #E5EAF2;
  --cor-borda-forte: #CBD5E1;

  /* ---------- CORES: SOBRE FUNDO ESCURO ---------- */
  --cor-texto-invertido: #FFFFFF;
  --cor-texto-invertido-suave: rgba(255,255,255,0.78);

  /* ---------- CTA (ação principal — Âmbar Sinal) ---------- */
  --cor-cta-bg: linear-gradient(135deg, #FF8A00, #FFB020);
  --cor-cta-bg-hover: linear-gradient(135deg, #E67A00, #FF8A00);
  --cor-cta-texto: var(--cor-navy-escuro);
  --cor-cta-borda: transparent;

  /* ---------- OFERTA (destaque de lançamento) ---------- */
  --cor-oferta-bg: linear-gradient(135deg, #FFB020, #FF8A00);
  --cor-oferta-texto: var(--cor-navy-escuro);
  --cor-oferta-texto-suave: rgba(10,25,48,0.68);
  --cor-oferta-borda: rgba(10,25,48,0.12);

  /* ---------- VERDE FIBRA (selos e confirmações, não-clicável) ---------- */
  --cor-verde-fibra: #17B978;
  --cor-verde-fibra-bg-soft: rgba(23,185,120,0.10);
  --cor-verde-fibra-bg-soft-forte: rgba(23,185,120,0.22);

  /* ---------- CIANO SINAL (links, foco, ícones técnicos) ---------- */
  --cor-ciano-sinal: #22D3EE;
  --cor-ciano-sinal-deep: #0891B2;
  --cor-ciano-sinal-bg-soft: rgba(8,145,178,0.09);
  --cor-ciano-sinal-bg-soft-forte: rgba(8,145,178,0.16);

  /* ---------- WHATSAPP ---------- */
  --cor-whatsapp-bg: #25D366;
  --cor-whatsapp-bg-hover: #1EBE5A;

  /* ---------- GRADIENTES DECORATIVOS ---------- */
  --grad-hero-overlay: linear-gradient(180deg,
    rgba(10,25,48,0.20) 0%,
    rgba(10,25,48,0.55) 55%,
    rgba(10,25,48,0.92) 100%);
  --grad-fundo-institucional: linear-gradient(160deg, #0A1930 0%, #1B4F9C 100%);

  /* ---------- TIPOGRAFIA ---------- */
  --fonte-display: 'Sora', system-ui, -apple-system, sans-serif;
  --fonte-secundaria: 'Petrov Sans', 'Sora', system-ui, sans-serif;
  --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica (mobile-first, escala com clamp para desktop) */
  --fs-eyebrow: 0.75rem;                                 /* 12px, uppercase */
  --fs-body-sm: 0.875rem;                                /* 14px */
  --fs-body: 1rem;                                       /* 16px */
  --fs-body-lg: 1.125rem;                                /* 18px */
  --fs-h3: 1.25rem;                                      /* 20px */
  --fs-h2: clamp(1.5rem, 3.5vw, 2rem);                   /* 24-32px */
  --fs-h1: clamp(2rem, 6vw, 3rem);                       /* 32-48px */
  --fs-display: clamp(2.5rem, 9vw, 4.5rem);              /* 40-72px — hero headline */
  --fs-price: clamp(2rem, 7vw, 3rem);                    /* preço em destaque */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.14em;
  --letter-spacing-widest: 0.24em;

  /* ---------- SPACING (escala de 4px) ---------- */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.25rem;   /* 20 */
  --s-6: 1.5rem;    /* 24 */
  --s-8: 2rem;      /* 32 */
  --s-10: 2.5rem;   /* 40 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-20: 5rem;     /* 80 */

  /* ---------- RADIUS ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-sm: 0 1px 2px rgba(10,25,48,0.06);
  --sh-md: 0 8px 20px rgba(10,25,48,0.10);
  --sh-lg: 0 20px 48px rgba(10,25,48,0.16);
  --sh-cta: 0 12px 28px rgba(14,42,94,0.32);

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad-mobile: var(--s-5);
  --container-pad-desktop: var(--s-12);

  /* ---------- MOTION ---------- */
  --transicao-rapida: 150ms ease;
  --transicao-media: 250ms ease;
}

/* ---------- RESET LEVE (opcional, remover se stack de produção já tem) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte-corpo); color: var(--cor-texto); background: var(--cor-fundo); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }