/* Design tokens — ver FRONTEND.md.
   Identidade Wicompras: laranja como cor de marca e de ação. */
:root {
  /* Marca */
  --cor-marca: #FF4E00;
  --cor-marca-escura: #E64500;
  --cor-marca-texto: #FFFFFF;
  --cor-marca-suave: #FFF0E8;

  /* Ação (laranja Wicompras) */
  --cor-acao: #FF4E00;
  --cor-acao-hover: #E64500;
  --cor-acao-suave: #FFF0E8;

  /* Feedback */
  --cor-positivo: #00A650;
  --cor-erro: #F23D4F;
  --cor-alerta: #F79E1B;

  /* Avaliação (estrela) */
  --cor-estrela: #FFB000;
  --cor-estrela-fundo: #FFF6DC;

  /* Neutros */
  --cor-fundo: #F5F5F5;
  --cor-superficie: #FFFFFF;
  --cor-texto: #1A1A1A;
  --cor-texto-suave: #666666;
  --cor-texto-sutil: #999999;
  --cor-borda: #E6E6E6;

  /* Elevação e forma */
  --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.1);
  --sombra-card-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
  --raio: 4px;

  /* Tipografia */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --texto-xs: 0.75rem;   /* 12px — badges, frete */
  --texto-sm: 0.8125rem; /* 13px — título do card */
  --texto-md: 1rem;      /* 16px — corpo */
  --texto-lg: 1.25rem;   /* 20px — preço no card */
  --texto-xl: 2rem;      /* 32px — preço na página de produto */

  /* Espaçamento */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;

  /* Layout */
  --largura-max: 1200px;
}

/* Transição suave entre páginas (Chrome/Edge; degrada sem quebrar) */
@view-transition {
  navigation: auto;
}