/**
 * Smart Fit - Tokens da nova marca (rebranding)
 * -----------------------------------------------------------------------------
 * Ponto unico de verdade para cor, tipografia, raio e espacamento da virada de
 * marca. Header, footer e componentes pontuais devem consumir estas variaveis
 * em vez de valores fixos, para que os proximos ajustes do rebranding sejam
 * feitos em um lugar so.
 *
 * Valores extraidos do Figma "Blog | Header e Footer" (file F1igg93kIZMgvtnmUylTlF,
 * frame "Sugestao 01" > Home > Footer, id 3:599) via API do Figma.
 */

/**
 * ------------------------------------------------------ Fonte de display
 *
 * Smart Fit Muscle Display, a fonte de display da marca nova. Os arquivos web
 * chegaram do kit da marca e estao em assets/webfonts.
 *
 * E a fonte que o Figma usa nos elementos de interface do header (no item
 * "TRILHAS DE CONTEUDO", id 1:2, o inspetor mostra Smart Fit Muscle Display 700,
 * 14px, entrelinha 100%, sem letter-spacing). Texto corrido, titulo de post e
 * conteudo editorial ficam na DM Sans.
 *
 * Dois pesos, e so: Regular (400) e Bold (700). Nao ha italico nem pesos
 * intermediarios no kit, entao pedir 500 ou 600 no CSS faria o navegador
 * sintetizar - use 400 ou 700.
 *
 * font-display: swap - o texto aparece na hora com a fonte de fallback e troca
 * quando a fonte chega. Como ela e usada em navegacao e botoes, esconder o texto
 * (o comportamento de "block") custaria mais do que o reflow.
 */
@font-face {
  font-family: 'Smart Fit Muscle Display';
  src: url('../webfonts/SmartFitMuscleDisplay-Regular.woff2') format('woff2'),
    url('../webfonts/SmartFitMuscleDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Smart Fit Muscle Display';
  src: url('../webfonts/SmartFitMuscleDisplay-Bold.woff2') format('woff2'),
    url('../webfonts/SmartFitMuscleDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------------------------------------------------------------- Cores */

  /* Amarelo institucional novo (vetor do lockup, id 3:602). */
  --sf-yellow: #FFC409;
  --sf-yellow-dark: #E0A800;
  /* Amarelo da marca antiga, mantido enquanto ha telas nao migradas. */
  --sf-yellow-legacy: #FFB612;

  --sf-black: #000000;
  --sf-white: #FFFFFF;

  --sf-gray-050: #F6F6F6;
  --sf-gray-200: #E6E6E6;
  --sf-gray-400: #B3B3B3;
  --sf-gray-600: #8C8C8C;
  /* Placeholder da busca do header (medido no render do frame 1:2). */
  --sf-gray-700: #707070;
  /* Botao circular dentro da busca do header (branco ~19% sobre preto). */
  --sf-gray-750: #313131;
  /* Fundo da busca do header = branco 10% sobre preto. */
  --sf-gray-800: #1A1A1A;

  /**
   * Sobre fundo escuro o Figma nao usa cinza: usa branco com opacidade.
   * Links de navegacao = branco 50%; textos institucionais = branco 100%.
   */
  --sf-on-dark-strong: #FFFFFF;
  --sf-on-dark-muted: rgba(255, 255, 255, 0.5);
  --sf-divider-on-dark: rgba(255, 255, 255, 0.2);
  /* Reguas do footer mobile (Figma id 6:84 / 6:88): branco 10%. */
  --sf-divider-on-dark-soft: rgba(255, 255, 255, 0.1);
  --sf-divider-on-light: rgba(0, 0, 0, 0.12);

  /* ---------------------------------------------------------- Tipografia */

  /* Fonte institucional da marca nova (Google Fonts). */
  --sf-font-brand: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sf-font-text: var(--sf-font-brand);
  /**
   * Fonte de display da marca: menu do header, rotulo dos botoes e navegacao de
   * trilha. Os arquivos ja estao no tema (a @font-face fica no topo deste
   * arquivo); a DM Sans segue como fallback para o caso de a fonte nao carregar.
   */
  --sf-font-display: 'Smart Fit Muscle Display', var(--sf-font-brand);

  --sf-fw-regular: 400;
  --sf-fw-medium: 500;
  --sf-fw-bold: 700;

  /* Escala do footer/header conforme Figma (base 16px). */
  --sf-fs-overline: 0.75rem;
  /* 12px  - titulos de coluna, weight 700, uppercase */
  --sf-fs-body: 1rem;
  /* 16px  - links de navegacao e textos, weight 500 */
  --sf-fs-body-sm: 0.875rem;
  /* 14px  - endereco, CNPJ e rotulo do acordeao no mobile */
  --sf-fs-caption: 0.75rem;
  /* 12px  - aviso legal */

  --sf-lh-overline: 1.4;
  /* 16.8px sobre 12px */
  --sf-lh-body: 1.4;
  /* 22.4px sobre 16px */

  --sf-ls-overline: 0;

  /* --------------------------------------------------------------- Forma */
  --sf-radius-sm: 8px;
  --sf-radius-md: 16px;
  /* Superficies grandes (cards de listagem, blocos de destaque). */
  --sf-radius-lg: 24px;
  --sf-radius-pill: 999px;

  /* --------------------------------------------------------------- Sombra */
  /**
   * SEM SOMBRA NO TEMA. Este token esta sem uso.
   *
   * A referencia e a tabela de precos do site institucional, onde os blocos sao
   * delimitados por linha (contorno). Primeiro saiu a sombra de repouso (havia um
   * --sf-shadow-card de 2px nos cards e no banner de categoria) e depois a de
   * hover: o card em foco passou a ser sinalizado por cor de fundo
   * (--sf-card-hover-bg, em cards.css) mais o leve crescimento.
   *
   * O token fica declarado so para nao quebrar quem ainda o referencie. Nao
   * reintroduza sombra sem pedido - foi decisao de produto.
   */
  --sf-shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.1);

  /* ------------------------------------------------------------ Layout */
  /* Frame do Figma: 1440 de viewport, conteudo de 1280 com 80px de recuo. */
  --sf-container-max: 1280px;
  --sf-container-gutter: 80px;
  /**
   * Header: as medidas vem do SITE INSTITUCIONAL, nao do Figma.
   *
   * O Figma desenhava 141px no desktop (frame 1:2) e 75px no mobile. Ficou de
   * fora por orientacao do time: o design foi feito sem acompanhar o site, e o
   * padrao a seguir e o que ja esta no ar em smartfit.com.br.
   *
   * Medido no header do institucional renderizado (o header dele e Tailwind, a
   * altura nasce do padding dos links de navegacao, py 35px no desktop e 16px no
   * mobile, mais 1px de borda inferior):
   *
   *   desktop 1440 ..... 91px de barra (90 de conteudo + 1 de borda), recuo 32px
   *   mobile 390 ....... 73px de barra (72 de conteudo + 1 de borda), recuo 24px
   *
   * Os valores aqui sao a altura total ocupada pela barra, para o blog ocupar o
   * mesmo espaco vertical - o blog nao usa a borda inferior, o fundo dele e preto
   * cheio.
   */
  --sf-header-height: 91px;
  --sf-header-height-mobile: 73px;
  --sf-header-gutter: 32px;
  --sf-header-gutter-mobile: 24px;

  /* ---------------------------------------------------------- Transicoes */
  --sf-transition: 0.2s ease;
}