/**
 * variables.css
 * =============================================================================
 * Design Tokens — Colégio Ser! | Tecnologias Educacionais (T.E)
 * Paleta: a página começa em azul-noite no topo e termina em ameixa no rodapé.
 * Os nomes antigos (--color-green-*) foram mantidos porque o JS os usa em
 * estilos inline; os valores agora são da paleta azul -> roxo.
 * =============================================================================
 */

:root {
  /* ---------------------------------------------------------------------
   * 1. Paleta nomeada
   * ------------------------------------------------------------------ */
  --noite: #0D1335;        /* azul-escuro do topo da página */
  --noite-2: #151B45;      /* azul um tom acima (superfícies no topo) */
  --ameixa: #2B1650;       /* roxo do fim da página */
  --ameixa-escura: #140B2C;/* rodapé */
  --papel: #EEEBFA;        /* texto principal */
  --lavanda: #BFAEFF;      /* links, rótulos e destaques de texto */
  --violeta: #6A4BF5;      /* botões (contraste AA com texto branco) */
  --violeta-hover: #7B5FFF;

  /* ---------------------------------------------------------------------
   * 2. Tokens legados (usados no CSS base e no JS)
   * ------------------------------------------------------------------ */
  --color-dark-blue: #0D1335;
  --color-dark-blue-light: #151B45;
  --color-dark-blue-deep: #090D26;
  --color-primary-dark: #0D1335;
  --color-primary: #151B45;

  --color-green-light: #6A4BF5;
  --color-green-bright: #BFAEFF;
  --color-green-dark: #BFAEFF;
  --color-green-soft: rgba(191, 174, 255, 0.10);
  --color-green-border: rgba(191, 174, 255, 0.28);
  --color-accent: #6A4BF5;
  --color-accent-light: rgba(191, 174, 255, 0.10);
  --color-accent-dark: #BFAEFF;

  /* Mantido por compatibilidade: agora é uma cor chapada, sem degradê */
  --gradient-brand: linear-gradient(#6A4BF5, #6A4BF5);

  /* ---------------------------------------------------------------------
   * 3. Superfícies e bordas (translúcidas para acompanhar o fundo azul->roxo)
   * ------------------------------------------------------------------ */
  --color-white: #FFFFFF;
  --color-bg-main: #0D1335;
  --color-bg-card: rgba(255, 255, 255, 0.045);
  --color-bg-alt: rgba(255, 255, 255, 0.03);
  --color-bg-solid: #171C47;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(191, 174, 255, 0.45);

  /* ---------------------------------------------------------------------
   * 4. Texto
   * ------------------------------------------------------------------ */
  --color-heading: #F4F2FC;
  --color-text-main: #E6E3F5;
  --color-text-muted: #A9A6CB;
  --color-text-light: #8783AE;
  --color-text-white: #FFFFFF;

  /* ---------------------------------------------------------------------
   * 5. Tipografia
   *   Display: Big Shoulders Display — condensada, cartaz de jogo
   *   Texto:   Atkinson Hyperlegible — feita para leitura fácil
   * ------------------------------------------------------------------ */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'Atkinson Hyperlegible', system-ui, sans-serif;

  /* ---------------------------------------------------------------------
   * 6. Sombras (discretas, sem brilho colorido)
   * ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.38);
  --shadow-glow-green: 0 0 0 0 transparent;

  /* ---------------------------------------------------------------------
   * 7. Formas, transições e layout
   * ------------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  --container-max-width: 1200px;
  --header-height: 72px;

  /* Fundo do cabeçalho (o JS troca de azul para roxo conforme a rolagem) */
  --header-bg: rgba(13, 19, 53, 0.97);
  --header-text-color: #FFFFFF;
}