/* ==========================================================================
   tokens.css — variáveis globais da diogoapps-landing
   Herdado do myeducationhub (mesma família visual da casa). Regra pétrea:
   nenhum hex vai direto em template. Cor da marca é sempre var(--accent) ou
   var(--accent-texto). O único lugar onde o hex #3387E9 aparece é NESTE
   arquivo.
   ========================================================================== */

:root {
  /* Cor da marca — rampa derivada por paleta.py de #3387E9 (tema light) */
  --accent:              #3387E9;
  --accent-hover:        #1872DC;
  --accent-escura:       #135AAD;
  --accent-suave:        #E7EFF8;
  --accent-soft:         rgba(51, 135, 233, 0.12);
  --accent-sombra:       rgba(51, 135, 233, 0.15);
  --accent-texto:        #1872DC;   /* USE ESTE em texto sobre fundo branco (4.69:1, WCAG AA) */
  --texto-sobre-accent:  #FFFFFF;

  /* IA — paleta roxa própria. Não usada na landing, deixada por convenção. */
  --roxo:                #7C3AED;
  --roxo-suave:          #F3EEFE;

  /* Neutros (tema light) */
  --branco:              #FFFFFF;
  --fundo:               #F6F8FB;
  --superficie:          #FFFFFF;
  --borda:               #E4E7EB;
  --borda-forte:         #CBD2D9;

  /* Texto */
  --texto:               #1F2933;
  --texto-secundario:    #52606D;
  --texto-suave:         #616E7C;
  --texto-fraco:         #7B8794;

  /* Estados */
  --sucesso:             #16A34A;
  --sucesso-suave:       #DCFCE7;
  --alerta:              #F59E0B;
  --alerta-suave:        #FEF3C7;
  --perigo:              #DC2626;

  /* Tipografia */
  --font:                "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titulo:         "Sora", "Inter", sans-serif;

  --fs-xs:               11.5px;
  --fs-sm:               13px;
  --fs-base:             15px;
  --fs-lg:               16px;
  --fs-xl:               20px;
  --fs-2xl:              26px;
  --fs-3xl:              34px;
  --fs-4xl:              44px;

  /* Espaços */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Raios */
  --raio-sm:             6px;
  --raio:                10px;
  --raio-lg:             16px;
  --raio-full:           999px;

  /* Sombras */
  --sombra-1:            0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-2:            0 4px 12px rgba(15, 23, 42, 0.08);
  --sombra-3:            0 12px 28px rgba(15, 23, 42, 0.12);

  --transicao:           .18s ease;
}