/* Design tokens — ver FRONTEND.md.
   --cor-marca é placeholder inspirado no ML: definir cor de marca própria antes do lançamento. */
:root {
  /* Marca */
  --cor-marca: #FFE600;
  --cor-marca-texto: #332900;

  /* Ação */
  --cor-acao: #3483FA;
  --cor-acao-hover: #2968C8;
  --cor-acao-suave: #E3EDFB;

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

  /* Neutros */
  --cor-fundo: #EBEBEB;
  --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.12);
  --sombra-card-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
  --raio: 6px;

  /* 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.5rem;    /* 24px — 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;
}