/* ============================================================
   TOKENS — JMaia Campo Grande
   Paleta e tipografia vindas do roteiro da marca.
   Estrutura de tokens copiada do sistema do site de referência.
   Para trocar as cores do site inteiro, edite SÓ este arquivo.
   ============================================================ */

:root {
  /* ---- Paleta base (roteiro JMaia) ---- */
  --color--1:  #0B0B0C;  /* preto — fundo base */
  --color--2:  #17161A;  /* carvão — blocos alternados */
  --color--3:  #C41E2A;  /* vermelho da placa — CTA e destaques */
  --color--4:  #8E1119;  /* vermelho escuro — hover / sombra */
  --color--5:  #D9A441;  /* dourado — molduras, luzes, números */
  --color--6:  #F0CE84;  /* dourado claro — brilho / gradiente */
  --color--7:  #F5EFE6;  /* creme — texto principal */
  --color--8:  #3A2A20;  /* marrom — madeira, tiles do header */
  --color--9:  #B9AFA4;  /* cinza texto — secundário */
  --color--10: #241A14;  /* marrom escuro — cards */
  --color--11: #000;
  --color--12: #fff;

  /* Aliases legíveis (use estes no CSS das seções) */
  --preto:        var(--color--1);
  --carvao:       var(--color--2);
  --vermelho:     var(--color--3);
  --vermelho-esc: var(--color--4);
  --dourado:      var(--color--5);
  --dourado-cl:   var(--color--6);
  --creme:        var(--color--7);
  --marrom:       var(--color--8);
  --marrom-esc:   var(--color--10);
  --cinza-txt:    var(--color--9);

  /* Duplas de cor por seção (o site alterna entre 4) */
  --palette--1-1: var(--preto);   --palette--1-2: var(--vermelho); --palette--1-3: var(--creme);
  --palette--2-1: var(--carvao);  --palette--2-2: var(--dourado);  --palette--2-3: var(--creme);
  --palette--3-1: var(--marrom);  --palette--3-2: var(--dourado-cl); --palette--3-3: var(--creme);
  --palette--4-1: var(--vermelho);--palette--4-2: var(--creme);    --palette--4-3: var(--preto);

  /* ---- Tipografia ---- */
  --family--1: "Playfair Display", Georgia, "Times New Roman", serif;      /* display / headings */
  --family--2: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; /* corpo */
  --family--3: "Oswald", "Arial Narrow", Impact, sans-serif;               /* labels, botões, números */
  --family--4: "Great Vibes", "Snell Roundhand", cursive;                  /* palavra manuscrita */

  /* ---- Containers e grid ---- */
  --container-max-width-1: 1360px;
  --container-max-width-2: 750px;
  --container-max-width-3: 830px;
  --container-max-width-4: 1248px;
  --container-padding-sm: 20px;
  --container-padding-lg: 40px;
  --container-padding: var(--container-padding-sm);
  --grid-column-count: 12;
  --grid-gap: 20px;

  /* ---- Base ---- */
  --base--background-color: var(--preto);
  --base--text-color: var(--creme);

  /* ---- Motion ---- */
  --transition-easing-bounce--1: cubic-bezier(.115, .965, .38, 1.595);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);

  /* ---- Assinatura visual: corte angular ---- */
  --offset-size: 25px;   /* altura da "rasgadura" entre seções */
  --corner-cut: 28px;    /* canto cortado dos cards */

  /* Painel do hero: forma final e forma "fechada" (usada na entrada).
     Os dois precisam ter o MESMO número de vértices para interpolar. */
  --hero-panel-clip:        polygon(78% 0, 100% 42px, 95% 100%, 0 100%, 0 16px);
  --hero-panel-clip-closed: polygon(0% 0, 0% 42px, 0% 100%, 0 100%, 0 16px);

  /* ---- Cursor customizado ---- */
  --cursor-color: var(--dourado);
  --cursor-text-color: var(--preto);
  --cursor-z-index: 999;

  /* ---- Foco acessível ---- */
  --outline-color: var(--dourado);
  --outline-width: 3px;
  --outline-offset: 4px;

  /* ---- Header ---- */
  --header-tile-color: var(--marrom);
  --header-height: 92px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--container-padding-lg);
    --grid-gap: 24px;
    --offset-size: 40px;
    --corner-cut: 40px;
    --hero-panel-clip:        polygon(75% 0, 100% 74px, 94% 100%, 0 100%, 0 26px);
    --hero-panel-clip-closed: polygon(0% 0, 0% 74px, 0% 100%, 0 100%, 0 26px);
  }
}