/* ==========================================================================
   Casa Esportiva — Design Tokens
   Baseados na loja casaesportiva.vtex.app (identidade atual da marca)
   Plataforma da Campanha 65 Anos

   Substituem a versão anterior, que seguia o site institucional
   (Meuga/Kinetica, botões em pílula). O backup está em
   tokens-meuga-antigo.css.bak.
   ========================================================================== */

/* --- Tipografia --------------------------------------------------------
   Klavika -> títulos, sempre em CAIXA ALTA, peso 700
   Inter   -> texto corrido, formulários, botões e toda a UI
   ---------------------------------------------------------------------- */

@font-face { font-family: "Klavika"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Klavika-Light.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("../fonts/Klavika-LightItalic.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Klavika-Medium.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/Klavika-MediumItalic.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Klavika-Bold.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/Klavika-BoldItalic.otf") format("opentype"); }
@font-face { font-family: "Klavika"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/Klavika-RegularItalic.otf") format("opentype"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Inter-700.woff2") format("woff2"); }

:root {
  /* --- Cores da marca (lidas da loja) --- */
  --ce-verde:          #009445;  /* primária: CTA, barra de aviso, destaques */
  --ce-verde-escuro:   #007736;  /* hover */
  --ce-verde-claro:    #D8F1D9;  /* fundo de selo e área de sucesso */
  --ce-vermelho:       #D6001C;  /* alerta e erro */
  --ce-vermelho-escuro:#B00017;
  --ce-preto:          #000000;  /* tipografia forte e botão secundário */

  /* --- Neutros --- */
  --ce-branco:         #FFFFFF;
  --ce-off:            #FAFAFA;  /* fundo de seção alternada */
  --ce-cinza-claro:    #E2E7E9;  /* divisores, fundo de bloco */
  --ce-cinza-medio:    #CDD3D6;  /* bordas de campo */
  --ce-cinza-texto:    #7A8082;  /* texto secundário, legendas */

  /* --- Estados --- */
  --ce-sucesso:        var(--ce-verde);
  --ce-erro:           var(--ce-vermelho);
  --ce-alerta:         #E8A200;

  /* --- Famílias --- */
  --ce-fonte-titulo:   "Klavika", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --ce-fonte-texto:    "Inter", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;

  /* --- Escala tipográfica ---------------------------------------------
     A loja usa Klavika 700 em caixa alta com espacejamento leve.
     É uma fonte de largura normal, então os tamanhos são convencionais —
     nada a ver com a escala exagerada que a Meuga exigia.
     -------------------------------------------------------------------- */
  --ce-h1:      clamp(2.25rem, 1.6rem + 3.2vw, 4rem);      /* 36 -> 64px */
  --ce-h2:      clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);   /* 26 -> 40px */
  --ce-h3:      clamp(1.25rem, 1.1rem + .7vw, 1.5625rem);  /* 20 -> 25px */
  --ce-h4:      1rem;

  --ce-corpo:      clamp(0.9375rem, .9rem + .3vw, 1rem);
  --ce-corpo-sm:   0.875rem;
  --ce-legenda:    0.75rem;
  --ce-lead:       clamp(1rem, .95rem + .5vw, 1.25rem);

  --ce-ls-titulo:  .01em;   /* espacejamento das caixas altas */
  --ce-lh-titulo:  1.1;
  --ce-lh-texto:   1.6;

  /* --- Cantos: a loja é toda reta ------------------------------------- */
  --ce-raio:        0px;
  --ce-raio-campo:  0px;
  --ce-raio-card:   0px;

  /* --- Espaçamento --- */
  --ce-esp-1: 4px;  --ce-esp-2: 8px;  --ce-esp-3: 12px;
  --ce-esp-4: 16px;
  --ce-esp-6:  clamp(18px, 1rem + 1vw, 24px);
  --ce-esp-8:  clamp(22px, 1.1rem + 1.6vw, 32px);
  --ce-esp-12: clamp(30px, 1.4rem + 2.6vw, 48px);
  --ce-esp-16: clamp(38px, 1.6rem + 3.8vw, 64px);
  --ce-esp-24: clamp(48px, 2rem + 5vw, 80px);

  --ce-gutter: clamp(16px, 3vw, 32px);

  /* --- Sombras: discretas, a loja quase não usa --- */
  --ce-sombra-sm: 0 1px 3px rgba(0,0,0,.08);
  --ce-sombra-md: 0 4px 16px rgba(0,0,0,.10);

  /* --- Layout --- */
  --ce-largura-max: 1280px;
  --ce-borda: 1px solid var(--ce-cinza-claro);
}