/* ==========================================================================
   KWF STUDIO — Design tokens
   Fonte única de verdade. Mudou aqui, mudou no site inteiro.
   ========================================================================== */

:root{

  /* --- 1. Cor primitiva (vem da identidade visual, não inventar) --- */
  --kwf-vinho:      #700010;
  --kwf-coral:      #F17050;
  --kwf-tinta:      #1E1517;
  --kwf-creme:      #FFF3F3;
  --kwf-branco:     #FFFFFF;

  /* Derivadas — geradas a partir das primitivas, para estados e camadas */
  --vinho-claro:    #A4001A;
  --vinho-escuro:   #4C000B;
  --coral-claro:    #F79176;
  --coral-fraco:    rgba(241,112,80,.12);
  --tinta-90:       rgba(30,21,23,.90);
  --tinta-70:       rgba(30,21,23,.70);
  --tinta-55:       rgba(30,21,23,.55);
  --tinta-35:       rgba(30,21,23,.35);
  --tinta-12:       rgba(30,21,23,.12);
  --linha:          rgba(112,0,16,.13);
  --linha-forte:    rgba(112,0,16,.28);

  /* --- 2. Cor semântica (é isso que os componentes usam) --- */
  --fundo:          var(--kwf-branco);
  --fundo-suave:    var(--kwf-creme);
  --fundo-escuro:   var(--kwf-tinta);
  --texto:          var(--kwf-tinta);
  --texto-suave:    var(--tinta-70);
  --texto-fraco:    var(--tinta-55);
  --texto-invertido:var(--kwf-creme);
  --acento:         var(--kwf-vinho);
  --destaque:       var(--kwf-coral);
  --borda:          var(--linha);

  --gradiente:      linear-gradient(96deg, var(--kwf-vinho) 5%, var(--vinho-claro) 55%, var(--kwf-coral));
  --gradiente-suave:linear-gradient(96deg, var(--kwf-vinho), var(--kwf-coral));

  /* --- 3. Tipografia --- */
  --fonte-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --fonte-texto:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-serif:   "Instrument Serif", Georgia, serif;

  /* Escala fluida — cresce com a tela, sem breakpoint */
  --t-xs:   clamp(11px,  .70vw + 9px,  12.5px);
  --t-sm:   clamp(13px,  .30vw + 12px, 14.5px);
  --t-base: clamp(15px,  .35vw + 14px, 17px);
  --t-md:   clamp(17px,  .55vw + 15px, 20px);
  --t-lg:   clamp(21px,  1.1vw + 17px, 28px);
  --t-xl:   clamp(27px,  2.0vw + 19px, 40px);
  --t-2xl:  clamp(33px,  3.2vw + 20px, 56px);
  --t-3xl:  clamp(38px,  4.6vw + 20px, 72px);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  700;
  --peso-black:  800;

  --entrelinha-titulo: 1.03;
  --entrelinha-texto:  1.65;

  /* --- 4. Espaçamento (escala de 4) --- */
  --e-1:  4px;   --e-2:  8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;   --e-6: 32px;   --e-7: 48px;  --e-8: 64px;
  --e-9: 88px;   --e-10:120px;  --e-11:160px;

  --secao-y:  clamp(72px, 8vw, 150px);
  --pagina-x: clamp(20px, 5vw, 72px);
  --largura:  1380px;
  --leitura:  62ch;

  /* --- 5. Forma --- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;

  --sombra-sm: 0 2px 10px -4px rgba(30,21,23,.14);
  --sombra-md: 0 16px 40px -22px rgba(30,21,23,.35);
  --sombra-cta:0 14px 32px -14px rgba(112,0,16,.60);

  /* --- 6. Movimento --- */
  --rapido:  .18s;
  --normal:  .32s;
  --lento:   .62s;
  --curva:      cubic-bezier(.22,.61,.36,1);
  --curva-mec:  cubic-bezier(.62,.02,.15,1);  /* mecânica: anel de foco, diafragma */
}

@media (prefers-reduced-motion: reduce){
  :root{ --rapido:1ms; --normal:1ms; --lento:1ms; }
}