/* ============================================================
   TOKENS — Colégio Terceira Dimensão (3D)
   ============================================================
   Base: assets/tokens.css da skill `colegio-3d-design-system`.
   Ajustes desta build estão marcados com [PLANO §x] e foram
   aprovados em 22/08/2026 (ver memoria.md).

   Fonte única da verdade. NÃO redefina estes valores em outro
   arquivo — site.css e as páginas sempre consomem daqui.
   ============================================================ */

:root{

  /* ---------------------------------------------------------
     COR — marca (oficial, extraída dos 4 arquivos de logo)
     --------------------------------------------------------- */
  --color-navy:      #002856;
  --color-navy-deep: #001A3D;  /* [PLANO §8.2] fim do gradiente do hero */
  --color-red:       #FF0010;  /* filetes, ícones, preenchimentos */
  --color-red-ink:   #E5000E;  /* [PLANO §5] texto vermelho pequeno e botão accent — 4.84:1 */
  --color-black:     #000000;
  --color-white:     #FFFFFF;

  /* Derivados de superfície sobre navy */
  --on-navy-strong:  #FFFFFF;  /* títulos e eyebrow sobre navy — 14.60:1 */
  --on-navy-soft:    #C7D6E8;  /* texto de apoio sobre navy — 9.88:1 */

  /* Tinta clara do navy — usada só como fundo de faixa, para dar o ritmo
     de alternância da referência sem introduzir cor nova de marca.
     Não é cor de texto, ícone ou botão. [22/08/2026] */
  --surface-tint:    #E7EEF6;

  /* ---------------------------------------------------------
     COR — campanha (Instagram). NÃO usar na UI do site.
     Catalogadas apenas para peças sazonais.
     --------------------------------------------------------- */
  --color-sky-blue:      #76C5FC;
  --color-blue-vivid:    #157AEC;
  --color-blue-text:     #3F6CBF;
  --color-gold:          #F9BB64;
  --color-red-campaign:  #CC3C4A;

  /* Terceiros — isolados da paleta */
  --color-whatsapp: #25D366;

  /* ---------------------------------------------------------
     COR — neutros
     950 texto principal · 800 texto secundário forte
     600 texto secundário (5.48:1 sobre gray-50)
     400 SOMENTE borda funcional / desabilitado — nunca texto (2.66:1)
     200 divisor decorativo · 100 fundo suave · 50 fundo de página
     --------------------------------------------------------- */
  --gray-950: #0F1620;
  --gray-800: #2B3644;
  --gray-600: #5B6774;
  --gray-400: #94A0AC;
  --gray-200: #E1E6EA;
  --gray-100: #F1F3F5;
  --gray-50:  #F8F9FA;

  /* Superfícies do rodapé escuro */
  --on-dark-soft:  #B7C6DB;  /* 10.48:1 sobre gray-950 */
  --on-dark-mute:  #7C8BA0;  /*  5.24:1 sobre gray-950 */

  /* ---------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------- */
  --font-display: 'Sora', 'Sora Fallback', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Manrope Fallback', 'Segoe UI', system-ui, sans-serif;

  --text-h1-desktop: clamp(40px, 5vw, 64px);
  --text-h1-mobile:  clamp(28px, 8vw, 36px);
  --text-h1-lh:      1.1;

  --text-h2-desktop: clamp(32px, 4vw, 40px);
  --text-h2-mobile:  clamp(24px, 6vw, 28px);
  --text-h2-lh:      1.2;

  --text-h3-desktop: clamp(24px, 3vw, 28px);
  --text-h3-mobile:  clamp(20px, 5vw, 22px);
  --text-h3-lh:      1.3;

  --text-body-size:  clamp(16px, 1.2vw, 17px); /* [PLANO §3] era 17px fixo */
  --text-body-lh:    1.6;

  --text-small-size: 13.5px;
  --text-small-lh:   1.4;

  --text-button-size: 15px;

  /* ---------------------------------------------------------
     ESPAÇAMENTO — base 8px
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Ritmo vertical de seção — [PLANO §2] */
  --section-y:     var(--space-7);  /* mobile  */
  --header-h:      64px;

  /* ---------------------------------------------------------
     RAIO E SOMBRA
     --------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 3px rgba(15, 22, 32, 0.10), 0 1px 2px rgba(15, 22, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 22, 32, 0.14), 0 2px 8px rgba(15, 22, 32, 0.08);

  /* ---------------------------------------------------------
     LARGURA
     --------------------------------------------------------- */
  --content-max:    820px;
  --container-wide: 1200px;
  --gutter:         24px;

  /* ---------------------------------------------------------
     MOVIMENTO — [PLANO §11]
     --------------------------------------------------------- */
  --dur-fast:   120ms;
  --dur-card:   150ms;
  --dur-menu:   220ms;
  --dur-reveal: 400ms;
  --ease-menu:  cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 600px){
  :root{ --section-y: var(--space-8); }
}
@media (min-width: 900px){
  :root{ --section-y: var(--space-9); --header-h: 72px; }
}