/* ==========================================================================
   tokens.css — variáveis de design
   Tudo o que define a "cara" do site vive aqui. Mudar a marca = mudar isto.
   ========================================================================== */

:root {
  /* --- Marca (azul) ------------------------------------------------------
     Site "branco + azul": a AÇÃO (botões Adicionar, menu, pontinhos, logo,
     focus) é AZUL. O laranja (abaixo) fica só para desconto/urgência, e o
     preto só para texto e etiquetas. */
  --brand-50:  #e9f4fd;   /* fundos de hover muito subtis */
  --brand-100: #cbe6fb;
  --brand-200: #9bd0f7;
  --brand-300: #63b6f1;   /* ícones/detalhes subtis */
  --brand-400: #2f9bea;
  --brand-500: #0d87e0;   /* cor de acção — azul */
  --brand-600: #0a6cb8;   /* hover (escurece) */
  --brand-700: #085493;
  --brand-800: #063d6b;
  --brand-900: #042a4a;
  --brand: var(--brand-500);

  /* Acento ÚNICO — quente, só para conversão: desconto, poupança, portes
     grátis, contador do carrinho. É a única cor "a gritar" no site. */
  --accent-500: #ff5a1f;
  --accent-600: #e04412;

  /* --- Neutros ----------------------------------------------------------- */
  --grey-0:   #ffffff;
  --grey-25:  #fafbfc;
  --grey-50:  #f2f4f7;
  --grey-100: #e8ebf0;
  --grey-200: #d8dde5;
  --grey-300: #b9c1cd;
  --grey-400: #8b95a5;
  --grey-500: #6b7585;
  --grey-600: #4d5665;
  --grey-700: #363e4a;
  --grey-800: #232932;
  --grey-900: #12161c;

  /* --- Papéis semânticos -------------------------------------------------
     Usar sempre estes nos componentes, nunca os neutros directamente.
     Assim um redesign toca só neste bloco.
     Fundo da página a BRANCO PURO — antes era grey-50 e criava uma tinta
     cinza por trás de tudo (fotos, cards, gutters). Os cards continuam a
     destacar-se só por sombra/borda, não por contraste de fundo. */
  --bg-page:      #ffffff;
  --bg-surface:   var(--grey-0);
  --bg-subtle:    var(--grey-25);
  --bg-inverse:   var(--grey-900);

  --text-strong:  var(--grey-900);
  --text:         var(--grey-700);
  --text-muted:   var(--grey-500);
  --text-inverse: var(--grey-0);

  --border:        var(--grey-100);
  --border-strong: var(--grey-200);

  --price:      var(--grey-900);   /* preço a preto — deixa o desconto saltar */
  --price-old:  var(--grey-400);

  --success: #1a9d5a;
  --warning: #d98803;
  --danger:  #d92d20;

  /* --- Tipografia --------------------------------------------------------
     Plus Jakarta Sans: geométrica, com contraforma aberta e números bem
     desenhados — aguenta títulos pesados e preços pequenos. As fontes do
     sistema atrás são só rede de segurança enquanto a real carrega. */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-2xs: 0.6875rem; /* 11px — códigos SKU, disponibilidade */
  --fs-xs:  0.75rem;   /* 12px — badges, legendas */
  --fs-sm:  0.8125rem; /* 13px — texto de apoio */
  --fs-md:  0.9375rem; /* 15px — corpo */
  --fs-lg:  1.0625rem; /* 17px — preço */
  --fs-xl:  1.375rem;  /* 22px — subtítulos de bloco */
  --fs-2xl: 1.75rem;   /* 28px — títulos de secção mobile */
  --fs-3xl: 2.25rem;   /* 36px — títulos de secção desktop */
  --fs-4xl: 3rem;      /* 48px — hero */

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

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

  /* --- Espaçamento (escala de 4px) --------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* --- Raios ------------------------------------------------------------- */
  --r-sm:     4px;
  --r-md:     8px;
  --r-lg:     14px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* --- Sombras ----------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(18, 22, 28, 0.06);
  --sh-md: 0 2px 8px rgba(18, 22, 28, 0.08);
  --sh-lg: 0 8px 24px rgba(18, 22, 28, 0.12);
  --sh-up: 0 -2px 10px rgba(18, 22, 28, 0.10); /* barra inferior mobile */

  /* --- Layout ------------------------------------------------------------ */
  --container:    1280px;
  --container-pad: var(--sp-4);
  --header-h:      64px;
  --topbar-h:      34px;
  --bottomnav-h:   62px;

  /* --- Movimento --------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Camadas ----------------------------------------------------------- */
  --z-base:      1;
  --z-sticky:    100;
  --z-dropdown:  200;
  --z-bottomnav: 300;
  --z-overlay:   400;
  --z-modal:     500;
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--sp-6);
    --header-h: 76px;
  }
}