/* =========================================================================
   ALFAYED — TOKENS
   Paleta, tipografia, espaçamento e sombras extraídos do layout do Figma.
   Nenhum valor de cor deve ser escrito "solto" nos outros arquivos: tudo
   que for visual sai daqui, para o site inteiro mudar de um lugar só.
   ========================================================================= */

:root {
  /* ---- Azul da marca -------------------------------------------------- */
  --c-navy-900: #11162e; /* mais escuro — hover e sobreposições           */
  --c-navy-800: #151930; /* fundo principal do site                       */
  --c-navy-700: #141a3d; /* cartões sobre o azul (formulário do hero)     */
  --c-navy-600: #1a234c;
  --c-navy-500: #1e2b4f;
  --c-navy-400: #26385a; /* topo do gradiente do hero                     */

  /* ---- Dourado da marca ----------------------------------------------- */
  --c-gold-700: #a67638; /* dourado escuro — fim dos gradientes           */
  --c-gold-500: #d8b36d; /* dourado principal                             */
  --c-gold-300: #fcf8cf; /* dourado claro — brilho                        */
  --c-gold-200: #fff4b6;

  /* ---- Neutros --------------------------------------------------------- */
  --c-white: #ffffff;
  --c-text-light: #d9d9d9; /* parágrafos sobre o azul                     */
  --c-gray: #626161;       /* cinza do logotipo — selos e pílulas         */
  --c-star: #dfb300;       /* estrelas de avaliação                       */

  /* ---- Gradientes ------------------------------------------------------ */
  --grad-btn: linear-gradient(90deg, var(--c-gold-500) 0%, var(--c-gold-700) 100%);
  --grad-btn-brilho: linear-gradient(
    90deg,
    var(--c-gold-300) 0%,
    var(--c-gold-500) 35%,
    var(--c-gold-700) 100%
  );
  --grad-texto-ouro: linear-gradient(
    90deg,
    var(--c-gold-700) 0%,
    var(--c-gold-500) 41%,
    var(--c-gold-300) 77%,
    var(--c-gold-200) 100%
  );

  /* ---- Transparências reutilizadas ------------------------------------ */
  --c-borda-clara: rgba(255, 255, 255, 0.22);
  --c-borda-ouro: rgba(216, 179, 109, 0.45);
  --c-selo-fundo: rgba(168, 142, 93, 0.34);

  /* ---- Tipografia ------------------------------------------------------ */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
    sans-serif;

  /* Escala fluida: o primeiro valor é o tamanho no celular, o último o do
     layout do Figma (1920px). Entre os dois, o texto acompanha a tela.      */
  --fs-hero: clamp(2rem, 1.65rem + 1.5vw, 3rem);          /* 32 → 48px      */
  --fs-lede: clamp(1rem, 0.934rem + 0.28vw, 1.1875rem);   /* 16 → 19px      */
  --fs-h2: clamp(1.75rem, 1.596rem + 0.66vw, 2.1875rem);  /* 28 → 35px      */
  --fs-h3: clamp(1.125rem, 1.02rem + 0.44vw, 1.4375rem);  /* 18 → 23px      */
  --fs-corpo: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem); /* 15 → 17px    */
  --fs-pequeno: 0.875rem;                                  /* 14px          */
  --fs-mini: 0.8125rem;                                    /* 13px          */
  --fs-micro: 0.75rem;                                     /* 12px          */

  --lh-apertado: 1.2;
  --lh-titulo: 1.25;
  --lh-corpo: 1.55;

  --ls-selo: 0.06em;  /* espaçamento das letras nos selos e botões          */
  --ls-botao: 0.05em;

  /* ---- Layout ---------------------------------------------------------- */
  --largura-conteudo: 1280px; /* largura do container no layout             */
  --gutter: 20px;
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 12px;
  --raio-pill: 999px;

  /* ---- Profundidade e movimento --------------------------------------- */
  --sombra-card: 0 18px 40px rgba(0, 0, 0, 0.28);
  --sombra-header: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Duas velocidades: a curta para resposta de interface (foco, menu,
     borda de campo) e a longa para movimento — levantar card, crescer
     ícone. Movimento em 200ms fica seco; a curva sai devagar no fim.   */
  --transicao: 200ms ease;
  --transicao-suave: 420ms cubic-bezier(0.22, 0.75, 0.24, 1);

  --altura-header: 84px;
}

@media (min-width: 700px) {
  :root {
    --gutter: 32px;
    --altura-header: 100px;
  }
}

@media (min-width: 1100px) {
  :root {
    --altura-header: 128px;
  }
}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 1ms linear;
    --transicao-suave: 1ms linear;
  }
}