/* ============================================================
   TOKENS — Instituto Illuminante
   Paleta amostrada do logotipo institucional e do site oficial
   (illuminante.org.br). Fonte única de verdade para cor, tipo,
   espaço, raio e sombra. Nenhum valor bruto fora daqui.
   ============================================================ */

:root {
  /* ---------- Cor: institucional ---------- */
  --navy:        #292D4F;  /* navy do logotipo — âncora da marca */
  --navy-deep:   #1B1E38;
  --noir:        #0B0B12;  /* fundo escuro do hero do site oficial */
  --noir-2:      #15152A;

  /* ---------- Cor: atmosfera tecnológica (fita do hero) ---------- */
  --violet:      #7C3AED;
  --violet-soft: #A855F7;
  --cyan:        #22D3EE;

  /* ---------- Cor: raios do símbolo ---------- */
  --gold:        #EEE998;
  --gold-warm:   #F4E47D;
  --terra:       #DA9A65;
  --plum:        #834B78;

  /* ---------- Cor: ação (botão do site oficial) ---------- */
  /* Usada em 16 pontos além do botão: traço do eyebrow, checkmarks,
     numerais das aulas, bordas de fase, hover do FAQ. Quase todos sobre
     papel branco — por isso o CTA tem token próprio, abaixo. */
  --action:       #E37754;
  --action-hover: #D0613D;
  --action-ink:   #2A1408;

  /* ---------- Cor: CTA de conversão ---------- */
  --cta:       #FEDE7D;
  --cta-hover: #F7CE4F;
  --cta-ink:   #2A1408;               /* ≈12:1 sobre o amarelo */
  --cta-edge:  rgba(41, 45, 79, .22); /* contorno em fundo claro */

  /* ---------- Cor: superfícies ---------- */
  --paper:    #FFFFFF;
  --paper-2:  #F7F6F3;
  --paper-3:  #EFEEE9;

  /* ---------- Cor: texto ---------- */
  --ink:        #23232B;
  --ink-soft:   #55555F;
  --ink-muted:  #7C7C86;
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255, 255, 255, .74);
  --on-dark-muted:  rgba(255, 255, 255, .52);

  /* ---------- Cor: linhas ---------- */
  --line:        rgba(41, 45, 79, .13);
  --line-strong: rgba(41, 45, 79, .26);
  --line-dark:   rgba(255, 255, 255, .14);

  /* ---------- Tipografia ---------- */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* escala fluida: 360px → 1440px */
  --t-xs:  0.75rem;                                   /* 12 */
  --t-sm:  0.8125rem;                                 /* 13 */
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17 */
  --t-md:  clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);/* 17 → 19 */
  --t-lg:  clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);   /* 20 → 24 */
  --t-xl:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);       /* 24 → 32 */
  --t-2xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem); /* 30 → 46 */
  --t-3xl: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);      /* 36 → 64 */
  --t-num: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);     /* numerais */

  /* Escalas de display. A página não tinha contraste de tamanho — vivia
     inteira entre 16 e 46px, e é isso que faz um layout parecer gerado.
     Estes dois degraus existem para os poucos momentos que devem ser
     acontecimento: a corrida de áreas e os numerais das aulas. */
  --t-display: clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  --t-num-xl:  clamp(3.25rem, 1.5rem + 6.4vw, 6.5rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  --track-wide: .14em;  /* eyebrows — ecoa o tracking do logotipo */
  --track-tight: -.025em;

  /* ---------- Espaço ---------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --section-y: clamp(4.5rem, 3rem + 6.5vw, 8.5rem);
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --container: 1240px;
  --narrow:    780px;

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

  /* ---------- Elevação ---------- */
  --shadow-sm: 0 1px 2px rgba(41, 45, 79, .06),
               0 4px 14px rgba(41, 45, 79, .05);
  --shadow-md: 0 2px 6px rgba(41, 45, 79, .07),
               0 18px 40px rgba(41, 45, 79, .09);
  --shadow-action: 0 8px 24px rgba(208, 97, 61, .34);
  --shadow-cta:       0 10px 28px rgba(254, 222, 125, .24);
  --shadow-cta-hover: 0 14px 34px rgba(254, 222, 125, .34);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;

  /* ---------- Layout fixo ---------- */
  --topbar-h: 40px;
  --header-h: 74px;
}

@media (max-width: 860px) {
  :root {
    --topbar-h: 52px;
    --header-h: 64px;
  }
}