/* =========================================================
   CHURREX · Tokens do design system
   Cores medidas no logo e nos posts (assets brutos).
   ========================================================= */

@font-face {
  font-family: "Barthowheel";
  src: url("../assets/fonts/barthowheel.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Cor de marca ---------- */
  --brasa-50:  #FFF0EE;
  --brasa-100: #FFD9D4;
  --brasa-300: #F7695F;
  --brasa-500: #EB1C24;   /* vermelho do logo (fundo) */
  --brasa-600: #C9101A;   /* botões e links: branco a 5,9:1 */
  --brasa-700: #B00D15;
  --brasa-900: #8B060A;   /* "vinho": sombra dura dos títulos nos posts */

  --chama-100: #FFE6BF;
  --chama-300: #FFC560;
  --chama-500: #F19F21;   /* laranja da chama do logo */
  --chama-700: #C27410;

  --lume-400:  #FFC21A;   /* faíscas, brilho, destaque pequeno */
  --lume-200:  #FFE38A;

  /* ---------- Neutros quentes (com um toque de brasa) ---------- */
  --carvao-900: #24100C;  /* texto principal, secções escuras */
  --carvao-800: #33201B;
  --carvao-700: #4A332C;
  --carvao-500: #6B4A40;  /* texto secundário em creme: 7,4:1 */
  --carvao-300: #B9A39A;  /* texto secundário em carvão: 7,6:1 */
  --cinza-fio:  #EADCCB;  /* bordas em creme */
  --creme-50:   #FFFBF5;
  --creme-100:  #FFF7EC;  /* fundo neutro da página */
  --creme-200:  #FBEBD6;
  --branco:     #FFFFFF;

  /* ---------- Papéis ---------- */
  --fundo:          var(--creme-100);
  --fundo-alto:     var(--creme-50);
  --texto:          var(--carvao-900);
  --texto-suave:    var(--carvao-500);
  --fio:            var(--cinza-fio);
  --acao:           var(--brasa-600);
  --acao-hover:     var(--brasa-700);
  --foco:           var(--carvao-900);

  /* ---------- Tipografia ---------- */
  --fonte-display: "Barthowheel", "Nunito", system-ui, sans-serif;
  --fonte-texto:   "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* escala 1.25, com dois saltos de cartaz no topo */
  --t-xs:   0.8rem;
  --t-sm:   0.9rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.25rem;
  --t-xl:   1.563rem;
  --t-2xl:  1.953rem;
  --t-3xl:  2.441rem;
  --t-4xl:  3.052rem;
  --t-cartaz:  clamp(3rem, 1.6rem + 6vw, 6.5rem);
  --t-gigante: clamp(4rem, 1rem + 12vw, 11rem);

  --peso-texto: 400;
  --peso-semi:  700;
  --peso-forte: 800;

  --lh-texto: 1.6;
  --lh-titulo: 0.95;      /* títulos em maiúsculas aguentam-se apertados */
  --tr-display: 0.01em;
  --tr-rotulo: 0.08em;

  /* ---------- Espaço (múltiplos de 4) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --max-w: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --seccao: clamp(64px, 6vw + 32px, 128px);

  /* ---------- Forma ---------- */
  /* As faixas dos posts são retângulos; o arredondado é só o da chama. */
  --raio-0: 0;
  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-foto: 12px;
  --raio-full: 999px;
  --fio-w: 1px;
  --traco: 3px;

  /* inclinação de "carimbo" das faixas */
  --inclina: -2deg;
  --inclina-forte: -4deg;

  /* ---------- Sombra ---------- */
  /* Sombra dura (autocolante/carimbo), como o vinho por trás dos títulos. */
  --sh-duro-sm: 3px 3px 0 var(--brasa-900);
  --sh-duro-md: 5px 5px 0 var(--brasa-900);
  --sh-duro-carvao: 5px 5px 0 var(--carvao-900);
  --sh-texto: 0.05em 0.06em 0 var(--brasa-900);
  /* Sombra suave só para fotos e cartões sobre creme. */
  --sh-sm: 0 1px 2px rgb(36 16 12 / 0.08);
  --sh-md: 0 6px 16px rgb(36 16 12 / 0.12);
  --sh-lg: 0 16px 40px rgb(36 16 12 / 0.18);

  /* ---------- Movimento ---------- */
  --d-rapido: 150ms;
  --d-medio:  250ms;
  --d-lento:  400ms;
  --e-sai:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-entra: cubic-bezier(0.5, 0, 0.75, 0);
  --e-mola:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-nav: 50;
}