/* Escola Científica — tokens do design system
   Fonte das cores: Manual de marca (Júlia Ambrozini + Que Haja!, 2025).
   Regra de contraste: fundo escuro com texto claro, fundo claro com texto escuro. */

@font-face {
  font-family: "Alan Sans";
  src: url("../fontes/AlanSans.woff2") format("woff2"), url("../fontes/AlanSans.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Paleta institucional */
  --laranja: #e04d0c;
  --laranja-escuro: #b83c06;   /* derivado p/ texto e botões com contraste AA */
  --verde: #1f800f;
  --verde-escuro: #235e4f;

  /* Paleta de apoio (arco-íris do manual) */
  --carmim: #b20735;
  --amarelo: #f7af00;
  --amarelo-claro: #f0f2a5;
  --pessego: #f7ba80;
  --creme: #f1f2c9;
  --verde-claro: #95e18f;
  --salvia: #7c9f7a;
  --azul: #4054a1;
  --azul-ceu: #41c0f0;
  --azul-claro: #80c8e2;
  --roxo-escuro: #6c2473;
  --roxo: #964091;
  --lilas: #d1bcdc;
  --tinta: #231f1f;
  --branco: #ffffff;

  /* Superfícies */
  --papel: #fbfaf0;
  --papel-2: #f4f3dc;
  --linha: #e3e1c4;
  --texto: var(--verde-escuro);   /* texto em fundo claro: verde escuro no lugar do preto */
  --texto-suave: #3b6b5e;          /* 5,3:1 sobre creme */

  /* Tipografia */
  --fonte: "Alan Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --t-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --t-2xl: clamp(1.8rem, 1.4rem + 1.8vw, 2.75rem);
  --t-3xl: clamp(2.3rem, 1.6rem + 3.2vw, 4.25rem);
  --t-4xl: clamp(2.8rem, 1.8rem + 4.6vw, 5.75rem);

  /* Espaço (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --largura: 1200px;
  --largura-texto: 68ch;

  /* Forma: cantos generosos, como as letras arredondadas do logotipo */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 44px;
  --r-pilula: 999px;

  --sombra-1: 0 1px 2px rgb(35 31 31 / 0.06), 0 2px 8px rgb(35 31 31 / 0.06);
  --sombra-2: 0 2px 4px rgb(35 31 31 / 0.06), 0 12px 32px rgb(35 31 31 / 0.10);

  --ease: cubic-bezier(.2, .8, .2, 1);
}