/* =====================================================================
   FORZA — IDENTIDADE VISUAL 2026
   Fonte unica de verdade para cores, tipografia e grafismos da marca.
   Base: FBR01_BRANDING_BRANDBOOK_06MAI26 (MAD Creative)

   Uso: carregue este arquivo ANTES de qualquer outro CSS da pagina.
        Os demais stylesheets apenas remapeiam seus proprios tokens
        para as variaveis --fz-* definidas aqui.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  /* ===== 1. PALETA OFICIAL =========================================
     Os quatro unicos matizes aprovados pelo brandbook (pag. 035).
     Qualquer cor fora deste guia e considerada inadequada para uso.  */

  --fz-progresso: #FFE733;   /* #1 PROGRESSO — Pantone 107 C  */
  --fz-forca:     #30302E;   /* #2 FORCA     — Pantone 447 C  */
  --fz-parceria:  #232323;   /* #3 PARCERIA  — Pantone 440 C  */
  --fz-futuro:    #F2F0EB;   /* #4 FUTURO    — Pantone 9043 C */

  /* Aliases semanticos (uso no dia a dia) */
  --fz-yellow: var(--fz-progresso);
  --fz-dark:   var(--fz-forca);
  --fz-black:  var(--fz-parceria);
  --fz-paper:  var(--fz-futuro);

  /* Componentes RGB, para rgba() em sombras, focos e overlays */
  --fz-yellow-rgb: 255, 231, 51;
  --fz-dark-rgb:    48,  48, 46;
  --fz-black-rgb:   35,  35, 35;
  --fz-paper-rgb:  242, 240, 235;

  /* ===== 2. MATIZES ================================================
     Brandbook pag. 036: escalas de 20%. Matizes abaixo de 60% exigem
     texto escuro por cima.                                           */

  --fz-yellow-80: #FFEC5C;
  --fz-yellow-60: #FFF085;
  --fz-yellow-40: #FFF5AD;
  --fz-yellow-20: #FFFAD6;

  --fz-dark-80: #595957;
  --fz-dark-60: #838381;
  --fz-dark-40: #ACACAB;
  --fz-dark-20: #D6D6D5;

  --fz-black-80: #4F4F4F;
  --fz-black-60: #7B7B7B;
  --fz-black-40: #A7A7A7;
  --fz-black-20: #D3D3D3;

  /* Papel: degraus para separar superficies em tema claro */
  --fz-paper-2: #EAE7E0;
  --fz-paper-3: #DEDBD3;
  --fz-paper-4: #CFCBC2;

  /* Escuros: degraus para separar superficies em tema escuro */
  --fz-ink-1: #1C1C1C;   /* fundo mais profundo que PARCERIA */
  --fz-ink-2: var(--fz-parceria);
  --fz-ink-3: var(--fz-forca);
  --fz-ink-4: #3C3C39;
  --fz-ink-5: #4A4A46;

  /* ===== 3. CORES FUNCIONAIS =======================================
     Fora da paleta de marca, restritas a feedback de sistema
     (sucesso, erro, alerta, informacao). Dessaturadas para conviver
     com o amarelo PROGRESSO sem competir com ele.                    */

  --fz-success: #3E8E5A;
  --fz-danger:  #C4453B;
  --fz-warning: #D98C2B;
  --fz-info:    #3F7CAC;

  --fz-success-soft: rgba(62, 142, 90, 0.14);
  --fz-danger-soft:  rgba(196, 69, 59, 0.14);
  --fz-warning-soft: rgba(217, 140, 43, 0.14);
  --fz-info-soft:    rgba(63, 124, 172, 0.14);

  /* ===== 4. TIPOGRAFIA =============================================
     Titulos:  CoFo Peshka VF (width 73 / weight 900 / slant -15).
               Fonte proprietaria. Enquanto os arquivos nao estiverem
               disponiveis, Archivo assume o papel: mesmo eixo de
               largura (wdth 73), mesmo peso (900) e italico real —
               sem distorcer a letra, como pede o brandbook (pag. 041).
               Para ativar a CoFo Peshka, basta declarar o @font-face
               no fim deste arquivo; a cascata ja a prioriza.
     Textos:   DM Mono (oficial, disponivel no Google Fonts).          */

  --fz-font-display: 'CoFo Peshka VF', 'Archivo', 'Archivo Expanded',
                     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fz-font-body:    'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fz-font-mono:    var(--fz-font-body);

  /* Eixos variaveis do display, conforme brandbook */
  --fz-display-wdth: 73;
  --fz-display-wght: 900;

  /* Entrelinhas e tracking */
  --fz-lh-display: 0.94;
  --fz-lh-body: 1.65;
  --fz-tracking-display: -0.005em;
  --fz-tracking-body: 0;
  /* A largura 73 aperta os espacos entre palavras; compensamos aqui
     para os titulos nao lerem como uma palavra so. */
  --fz-word-display: 0.12em;
  --fz-tracking-label: 0.14em;   /* rotulos versaletes, como no brandbook */

  /* ===== 5. GEOMETRIA ==============================================
     A marca e angular: cantos cortados a 45 graus, nao arredondados.
     O raio existe so onde o corte nao cabe (pills, avatares).        */

  --fz-cut-sm: 6px;
  --fz-cut-md: 12px;
  --fz-cut-lg: 20px;
  --fz-cut-xl: 32px;

  --fz-radius-sm: 2px;
  --fz-radius-md: 4px;
  --fz-radius-lg: 6px;
  --fz-radius-pill: 999px;

  /* ===== 6. ELEVACAO ===============================================
     Sombras neutras e quentes, derivadas de FORCA e nao de preto puro. */

  --fz-shadow-xs: 0 1px 2px rgba(35, 35, 35, 0.06);
  --fz-shadow-sm: 0 2px 8px rgba(35, 35, 35, 0.10);
  --fz-shadow-md: 0 6px 20px rgba(35, 35, 35, 0.14);
  --fz-shadow-lg: 0 14px 40px rgba(35, 35, 35, 0.18);
  --fz-shadow-xl: 0 28px 64px rgba(35, 35, 35, 0.26);

  /* Foco acessivel: sempre em PROGRESSO */
  --fz-focus-ring: 0 0 0 3px rgba(255, 231, 51, 0.45);

  /* ===== 7. MOVIMENTO ============================================== */
  --fz-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --fz-t-fast: 0.14s var(--fz-ease);
  --fz-t-base: 0.24s var(--fz-ease);
  --fz-t-slow: 0.42s var(--fz-ease);
}

/* =====================================================================
   TIPOGRAFIA — CLASSES DE APOIO
   ===================================================================== */

/* Titulo da marca: condensado, pesado, inclinado. */
.fz-display,
.fz-display-italic {
  font-family: var(--fz-font-display);
  font-variation-settings: 'wdth' var(--fz-display-wdth), 'wght' var(--fz-display-wght);
  font-weight: 900;
  font-style: italic;
  line-height: var(--fz-lh-display);
  letter-spacing: var(--fz-tracking-display);
  word-spacing: var(--fz-word-display);
  text-transform: uppercase;
}

/* Variante reta, para quando a inclinacao atrapalhar a leitura
   (tabelas, rotulos curtos, numeros alinhados em coluna). */
.fz-display-upright {
  font-family: var(--fz-font-display);
  font-variation-settings: 'wdth' var(--fz-display-wdth), 'wght' var(--fz-display-wght);
  font-weight: 900;
  font-style: normal;
  line-height: var(--fz-lh-display);
  letter-spacing: var(--fz-tracking-display);
  word-spacing: var(--fz-word-display);
  text-transform: uppercase;
}

/* Corpo de texto oficial. */
.fz-body {
  font-family: var(--fz-font-body);
  font-weight: 400;
  line-height: var(--fz-lh-body);
  letter-spacing: var(--fz-tracking-body);
}

/* Rotulo em versalete espacado — recorrente no brandbook. */
.fz-label {
  font-family: var(--fz-font-body);
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: var(--fz-tracking-label);
  text-transform: uppercase;
}

/* =====================================================================
   GRAFISMOS (brandbook pag. 043)
   Formas ascendentes, angulos de evolucao e impulso.
   ===================================================================== */

/* Canto cortado a 45 graus — o gesto geometrico da marca. */
.fz-cut          { clip-path: polygon(0 0, calc(100% - var(--fz-cut-md)) 0, 100% var(--fz-cut-md), 100% 100%, var(--fz-cut-md) 100%, 0 calc(100% - var(--fz-cut-md))); }
.fz-cut-tr       { clip-path: polygon(0 0, calc(100% - var(--fz-cut-md)) 0, 100% var(--fz-cut-md), 100% 100%, 0 100%); }
.fz-cut-bl       { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--fz-cut-md) 100%, 0 calc(100% - var(--fz-cut-md))); }

/* Bloco de destaque amarelo com a aresta inclinada da pag. 022. */
.fz-flag {
  background: var(--fz-progresso);
  color: var(--fz-parceria);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  padding: 1.25rem 3.25rem 1.25rem 1.25rem;
}

/* Barra ascendente: sublinhado de titulo em PROGRESSO. */
.fz-rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--fz-progresso);
  border: 0;
  transform: skewX(-15deg);
}

/* Textura diagonal discreta, para fundos de secao. */
.fz-texture {
  background-image: repeating-linear-gradient(
    -60deg,
    rgba(255, 231, 51, 0.06) 0 2px,
    transparent 2px 14px
  );
}

/* =====================================================================
   LOGOTIPO
   Uma cor por aplicacao, sempre com contraste suficiente (pag. 031).
   ===================================================================== */

.fz-logo {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: none;   /* o wordmark e 4.74:1; nao pode ser espremido */
  flex: none;
}

/* Area de respiro obrigatoria em volta da marca (pag. 030). */
.fz-logo-safe { padding: 0.35em 0.5em; }

/* =====================================================================
   FOCO E ACESSIBILIDADE
   ===================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fz-progresso);
  outline-offset: 2px;
  box-shadow: var(--fz-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fz-t-fast: 0.01ms;
    --fz-t-base: 0.01ms;
    --fz-t-slow: 0.01ms;
  }
}

/* =====================================================================
   COFO PESHKA VF
   Descomente e aponte para os arquivos quando a licenca estiver
   disponivel. Nenhuma outra alteracao e necessaria: --fz-font-display
   ja lista a familia em primeiro lugar.

   @font-face {
     font-family: 'CoFo Peshka VF';
     src: url('./fonts/CoFoPeshkaVF.woff2') format('woff2-variations');
     font-weight: 100 900;
     font-stretch: 62% 125%;
     font-style: oblique 0deg 15deg;
     font-display: swap;
   }
   ===================================================================== */