/* ==========================================================================
   ROXO DIGITAL — TOKENS
   Fonte única de verdade: "ROXO Digital ID Visual.pdf" (Manual de Marca 2026).
   Nenhuma cor fora deste arquivo deve aparecer no site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografia — 02 TIPOGRAFIA do manual
   "Duas famílias, papéis fixos."
     OSWALD  -> títulos, chamadas, números de destaque
     POPPINS -> subtítulos (SemiBold) e texto corrido (Regular/Light)
   Fontes auto-hospedadas: nenhuma dependência de CDN externo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- 01 PALETA DE CORES — as quatro cores especificadas no manual ------ */
  --roxo-profundo: #4B1E7E; /* PRIMÁRIA · logo, títulos de destaque, identidade */
  --preto-grafite: #0D0D10; /* FUNDO    · fundo padrão de todas as peças      */
  --verde-sinal:   #2FD897; /* ACENTO   · só botões de ação e destaques       */
  --cinza-texto:   #9C9CA6; /* NEUTRO   · textos secundários e apoio          */

  /* ---- Degraus derivados ------------------------------------------------
     O manual define quatro cores, não uma escala. Estes degraus existem só
     para construir superfícies e hairlines sobre o Preto Grafite e para
     estados de interação. Todos saem das quatro cores acima. -------------- */
  --roxo-claro:  #7F49B4; /* roxo do wordmark, para uso sobre fundo escuro */
  --roxo-escuro: #2C1149;
  --verde-claro: #7FE8BE;
  --verde-escuro:#1FAF79;

  --grafite-00: #0D0D10; /* página            */
  --grafite-05: #131318; /* superfície elevada */
  --grafite-10: #1A1A20; /* bloco             */
  --grafite-20: #22222A; /* campo de formulário / hover */
  --grafite-30: #2E2E38; /* hairline          */
  --grafite-40: #3E3E4A; /* hairline forte    */

  --branco: #FFFFFF;
  --cinza-claro: #DEDEE3;
  --cinza-fraco: #6B6B75;

  /* ---- Papéis semânticos: texto ---------------------------------------- */
  --text-forte:   var(--branco);
  --text-corpo:   var(--cinza-claro);
  --text-apoio:   var(--cinza-texto);
  --text-fraco:   var(--cinza-fraco);
  --text-acento:  var(--verde-sinal);
  --text-marca:   var(--roxo-claro);
  --text-sobre-acento: var(--preto-grafite);

  /* ---- Papéis semânticos: superfície ----------------------------------- */
  --sup-pagina:  var(--grafite-00);
  --sup-elevada: var(--grafite-05);
  --sup-bloco:   var(--grafite-10);
  --sup-campo:   var(--grafite-10);
  --sup-marca:   var(--roxo-profundo);
  --sup-marca-suave: rgba(75, 30, 126, 0.22);
  --sup-acento-suave: rgba(47, 216, 151, 0.10);

  /* ---- Papéis semânticos: borda ---------------------------------------- */
  --borda-fina:   var(--grafite-30);
  --borda-forte:  var(--grafite-40);
  --borda-marca:  var(--roxo-profundo);
  --borda-acento: var(--verde-sinal);

  /* ---- Ação ------------------------------------------------------------- */
  --acao:        var(--verde-sinal);
  --acao-hover:  var(--verde-claro);
  --acao-press:  var(--verde-escuro);
  --foco:        var(--verde-sinal);

  /* ---- Famílias --------------------------------------------------------- */
  --fonte-display: 'Oswald', 'Arial Narrow', sans-serif;
  --fonte-corpo:   'Poppins', system-ui, -apple-system, sans-serif;

  /* ---- Escala tipográfica ----------------------------------------------
     Fluida: cada passo cresce entre 360px e 1440px de viewport. ---------- */
  --fs-micro:   0.6875rem;                              /* 11px  · rótulos   */
  --fs-mini:    0.75rem;                                /* 12px  · legendas  */
  --fs-peq:     0.875rem;                               /* 14px             */
  --fs-corpo:   1rem;                                   /* 16px             */
  --fs-corpo-g: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead:    clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
  --fs-h5:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-h3:      clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.7vw, 3.75rem);
  --fs-h1:      clamp(2.5rem, 1.35rem + 6.2vw, 7rem);

  /* Capa — a manchete e o lead da primeira tela têm degraus próprios
     porque precisam caber em um viewport, com teto mais baixo que --fs-h1. */
  --fs-capa:       clamp(2.125rem, 1.1rem + 4.6vw, 4.9rem);
  --fs-capa-baixa: clamp(1.875rem, 1rem + 3vw, 3rem);
  --fs-capa-lead:  clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem);

  /* Numerais de destaque — "números de destaque" é papel de Oswald no
     manual, então preço e número de rail têm degrau próprio na rampa. */
  --fs-preco:   clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);
  --fs-numeral: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);

  /* ---- Entrelinha e tracking -------------------------------------------
     O tracking largo em maiúsculas é a assinatura do manual
     ("P R I M Á R I A", "R O X O · M A N U A L D E M A R C A"). --------- */
  --lh-display: 0.94;
  --lh-titulo:  1.06;
  --lh-normal:  1.35;
  --lh-solta:   1.62;

  --ls-display: -0.015em;
  --ls-titulo:  0.005em;
  --ls-rotulo:  0.16em;
  --ls-kicker:  0.28em;

  /* ---- Espaçamento — base 4px ------------------------------------------ */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-20: 80px;
  --e-24: 96px;
  --e-32: 128px;

  /* Ritmo de seção — encolhe no mobile, respira no desktop.
     O vão entre duas seções é o dobro deste valor, porque uma fecha e a
     outra abre com ele: 148px no desktop e 88px no telefone. */
  --secao-y: clamp(2.75rem, 2rem + 2.95vw, 5.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --rail: 148px;      /* coluna do rail numerado no desktop */
  --altura-nav: 68px;

  /* ---- Traço e forma ---------------------------------------------------
     "Arquitetura brutalista: estrutura, solidez, peso."
     Cantos retos e superfícies planas separadas por hairline, nunca sombra. */
  --raio: 0;
  --traco-fino: 1px;
  --traco-forte: 2px;
  --traco-slab: 5px;

  /* ---- Movimento -------------------------------------------------------- */
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 160ms;
  --dur-media: 420ms;
  --dur-lenta: 900ms;
}