/* =============================================================================
   OCompra.com — tokens.css
   Tokens de design semânticos em :root. Trocar a paleta = mudar SÓ este arquivo
   (componentes usam var(--color-*) / var(--*), nunca cores ou medidas literais).
   Paleta ATIVA: Opção A (quente/promo — energia de ofertas).
   Paleta B (sóbria/tech) fica documentada (comentada) ao final.
   ============================================================================= */

:root {
  /* --------------------------------------------------------------------------
     COR — Paleta A (quente/promo) — ATIVA
     -------------------------------------------------------------------------- */
  --color-primary:    #E8470C; /* laranja-vermelho: CTAs, preço-destaque, % off */
  --color-primary-d:  #C23A09; /* hover/active do primary (mais escuro) */
  --color-primary-l:  #FF6A33; /* gradiente/realce do primary (mais claro) */
  --color-secondary:  #1F2A44; /* azul-marinho: header, rodapé, texto forte */
  --color-secondary-l:#2C3A5C; /* variação clara do secondary */
  --color-accent:     #FFB703; /* amarelo-âmbar: selos, badges, % OFF */
  --color-accent-d:   #E09E00; /* borda/realce do accent */
  --color-success:    #1B9E5A; /* verde: queda de preço, disponível, menor preço */
  --color-success-l:  #E6F6EE; /* fundo suave de sucesso */
  --color-alert:      #C81E1E; /* vermelho: esgotado, erro, expira em breve */
  --color-alert-l:    #FDECEC; /* fundo suave de alerta */

  --color-bg:         #FFFFFF; /* fundo base */
  --color-bg-soft:    #FFF4EC; /* fundo de cards/seções (quente suave) */
  --color-bg-warm:    #FFE9DA; /* realce quente (chips, faixas) */
  --color-surface:    #FFFFFF; /* superfície de cards elevados */
  --color-text:       #1A1A1A; /* texto principal */
  --color-text-soft:  #3A4150; /* texto de corpo secundário */
  --color-text-muted: #5B6472; /* metadados, timestamps */
  --color-text-inv:   #FFFFFF; /* texto sobre fundos escuros/coloridos */
  --color-border:     #E6E0DA; /* bordas, divisores */
  --color-border-soft:#F1EBE5; /* divisores sutis */

  /* Gradiente quente do hero / faixas promo */
  --grad-hero: linear-gradient(135deg, #E8470C 0%, #FF6A33 48%, #FF8A00 100%);
  --grad-cta:  linear-gradient(180deg, #FF6A33 0%, #E8470C 100%);

  /* --------------------------------------------------------------------------
     TIPOGRAFIA — fonte do sistema (sem webfonts de terceiros)
     -------------------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica (mobile-first, ~1.2 ratio) */
  --fs-xs:   0.75rem;  /* 12px — metadados, microcopy */
  --fs-sm:   0.875rem; /* 14px — labels, badges */
  --fs-base: 1rem;     /* 16px — corpo */
  --fs-md:   1.125rem; /* 18px — subtítulo de card */
  --fs-lg:   1.375rem; /* 22px — títulos de seção */
  --fs-xl:   1.75rem;  /* 28px — título de página */
  --fs-2xl:  2.25rem;  /* 36px — headline hero (mobile) */
  --fs-3xl:  3rem;     /* 48px — headline hero (desktop, via media) */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;

  /* --------------------------------------------------------------------------
     ESPAÇAMENTO (escala 4px)
     -------------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space:    16px; /* compat (alias --space-4) */

  /* --------------------------------------------------------------------------
     RAIO DE BORDA
     -------------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius:      10px; /* padrão de cards/botões */
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------------
     SOMBRAS / ELEVAÇÃO
     -------------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(31, 42, 68, .06), 0 1px 3px rgba(31, 42, 68, .08);
  --shadow-2: 0 2px 6px rgba(31, 42, 68, .08), 0 4px 12px rgba(31, 42, 68, .08);
  --shadow-3: 0 8px 24px rgba(31, 42, 68, .12), 0 2px 6px rgba(31, 42, 68, .08);
  --shadow-cta: 0 6px 16px rgba(232, 71, 12, .32);
  --shadow-focus: 0 0 0 3px rgba(255, 138, 0, .45);

  /* --------------------------------------------------------------------------
     TRANSIÇÕES / MOVIMENTO
     -------------------------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 320ms var(--ease);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --maxw:        1180px;
  --header-h:    60px;
  --card-min:    180px; /* minmax mínimo do grid de cards */
}

@media (min-width: 900px) {
  :root {
    --fs-2xl: var(--fs-3xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}

/* =============================================================================
   Paleta B (sóbria/tech) — alternativa DOCUMENTADA. Para ativar, comente o bloco
   de cor da Paleta A acima e descomente este (mantém os demais tokens iguais).
   -----------------------------------------------------------------------------
:root {
  --color-primary:    #0B6BCB;
  --color-primary-d:  #0958A8;
  --color-primary-l:  #3B8FE0;
  --color-secondary:  #0F172A;
  --color-secondary-l:#1E293B;
  --color-accent:     #06B6D4;
  --color-accent-d:   #0596B0;
  --color-success:    #059669;
  --color-success-l:  #E6F6F0;
  --color-alert:      #DC2626;
  --color-alert-l:    #FDECEC;
  --color-bg:         #FFFFFF;
  --color-bg-soft:    #F1F5F9;
  --color-bg-warm:    #E8F0FB;
  --color-surface:    #FFFFFF;
  --color-text:       #0F172A;
  --color-text-soft:  #334155;
  --color-text-muted: #64748B;
  --color-text-inv:   #FFFFFF;
  --color-border:     #E2E8F0;
  --color-border-soft:#EEF2F7;
  --grad-hero: linear-gradient(135deg, #0B6BCB 0%, #3B8FE0 50%, #06B6D4 100%);
  --grad-cta:  linear-gradient(180deg, #3B8FE0 0%, #0B6BCB 100%);
  --shadow-cta: 0 6px 16px rgba(11, 107, 203, .32);
  --shadow-focus: 0 0 0 3px rgba(6, 182, 212, .45);
}
   ============================================================================= */