/* Tokens do Figma (arquivo Alado). Nenhuma cor/medida deve ser repetida fora daqui. */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores — azul-marinho */
  --azul-marinho-10: #f9fbff;
  --azul-marinho-20: #ebf2ff;
  --azul-marinho-30: #dde8ff;
  --azul-marinho-40: #cfdfff;
  --azul-marinho-50: #bed3fb;
  --azul-marinho-70: #6c86b7;
  --azul-marinho-80: #4c6595;
  --azul-marinho-90: #1b2e51;
  /* Estado hover do botão principal: azul-marinho-90 levemente clareado (derivado, não é token do Figma) */
  --azul-marinho-90-hover: color-mix(in srgb, var(--azul-marinho-90) 88%, white);

  /* Cores — verde */
  --verde-10: #f5fffa;
  --verde-20: #deffee;
  --verde-30: #c8ffe3;
  --verde-40: #b1ffd7;
  --verde-60: #80e8b4;
  --verde-70: #63c694;
  --verde-80: #49a476;
  --verde-90: #33825a;

  /* Cores — neutras */
  --neutra-10: #f8f7f3;
  --neutra-20: #f2f0e9;

  /* Cores — vermelho (cenário atual do comparativo) */
  --vermelho-20: #fbcec6;
  --vermelho-90: #c12f2b;

  /* Cores — texto */
  --texto-titulo: #1b2e51;
  --texto-corpo: #1b1a17;
  --texto-destaque: #216040;
  --texto-apoio: #5a584e;
  --texto-hero-titulo: #011136;
  --texto-hero-corpo: rgb(1 17 54 / 0.7);
  --texto-link: rgb(1 17 54 / 0.75);
  --texto-sobre-escuro: #f8f7f3;
  --marca-primaria: #216040;

  /* Cores — superfícies e bordas */
  --fundo-superficie: #fff;
  --fundo-pagina: #f8f7f3;
  --borda-padrao: #cfcdc4;
  --borda-forte: #5a584e;
  --fundo-fade: #fdffff;
  --borda-card: rgb(102 112 134 / 0.1);
  --fundo-botao-secundario: rgb(27 46 81 / 0.05);
  --fundo-botao-secundario-hover: rgb(27 46 81 / 0.1);
  --foco: var(--azul-marinho-90);

  /* Sombras */
  --sombra-botao-primario: 0 4px 8px 0 rgb(1 17 54 / 0.25), inset 0 -4px 6px 0 rgb(0 7 23 / 0.2);
  --sombra-botao-primario-hover: 0 6px 12px 0 rgb(1 17 54 / 0.3), inset 0 -4px 6px 0 rgb(0 7 23 / 0.2);
  --sombra-botao-primario-ativo: 0 1px 3px 0 rgb(1 17 54 / 0.25), inset 0 -2px 4px 0 rgb(0 7 23 / 0.2);
  --sombra-botao-secundario: 0 2px 4px 0 rgb(0 7 23 / 0.15);
  --sombra-botao-secundario-ativo: 0 1px 2px 0 rgb(0 7 23 / 0.15);
  --sombra-flutuante:
    0 1px 3px 0 rgb(27 46 81 / 0.04), 0 8px 20px -6px rgb(27 46 81 / 0.1),
    0 32px 64px -16px rgb(27 46 81 / 0.1);

  /* Painel de Workshops (Figma: "Sombra/Flutuante" com 6% no meio) */
  --sombra-painel:
    0 1px 3px 0 rgb(27 46 81 / 0.04), 0 8px 20px -6px rgb(27 46 81 / 0.06),
    0 32px 64px -16px rgb(27 46 81 / 0.1);

  --sombra-card: 0 4px 16px 0 rgb(27 26 23 / 0.12);
  /* Cards do comparativo "Na prática" (o Figma usa drop-shadow, aplicado com filter) */
  --sombra-comparacao: drop-shadow(0 1px 1.5px rgb(27 46 81 / 0.04)) drop-shadow(0 8px 10px rgb(27 46 81 / 0.06))
    drop-shadow(0 32px 32px rgb(27 46 81 / 0.1));

  /* Movimento de entrada (sem overshoot) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Linguagem de motion do site: mesma curva e durações coerentes em tudo.
     micro = hover/foco; base = abrir e fechar (FAQ, Workshops); enter = entrada de página/section;
     float = ciclo das flutuações contínuas (cada elemento varia um pouco em volta disso). */
  --dur-micro: 160ms;
  --dur-base: 320ms;
  --dur-enter: 650ms;
  --dur-float: 5.4s;
  --ease-float: ease-in-out;

  /* Tipografia */
  --fonte-texto: "DM Sans", system-ui, sans-serif;
  --fonte-titulo: "Lora", Georgia, serif;

  /* Layout: conteúdo até 1344px; margem lateral de 48px no desktop, 20px no mobile */
  --container-max: 1344px;
  --gutter: 20px;
  --raio: 16px;
  /* Header fixo em todas as páginas (Figma: 52px mobile — 14+24+14 —, 92px desktop — 24+44+24 —) */
  --header-h: 52px;
  --u: 1px; /* unidade das composições desktop (Hero, Transparência); ver hero.css */
  /* Fator de escala do desktop: 1 unidade = 1px no frame de 1200px do Figma (conteúdo de 1104px).
     Precisa ser lido por filhos de um elemento com container-type: inline-size (cqw). */
  --u-fluid: calc(100cqw / 1104 + clamp(0px, (100vw - 1440px) / 9600, 0.05px));
}

/* Breakpoint do layout desktop: 1024px (o Figma só tem desktop de 1200px e mobile de 375px;
   entre 1024px e 1200px a composição do Hero escala proporcionalmente, ver hero.css).
   Fica fixo em CSS porque media query não aceita variável: 1024px em todos os arquivos. */
@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --header-h: 92px;
  }
}