/* ==========================================================================
   Design System Educare: "Escola-Quintal Colorida"
   Cores do Uniforme: Amarelo Primário + Detalhes em Azul Marinho
   Paleta Viva: Cores do Logo (Vermelho, Verde, Laranja, Azul Céu, Roxo)
   ========================================================================== */

:root {
  /* Identidade Central — Uniforme & Marca Principal */
  --educare-yellow: #FFC400;         /* Amarelo vivo do uniforme e do logo */
  --educare-yellow-glow: #FFE082;
  --educare-yellow-dark: #D49B00;
  --educare-yellow-soft: #FFF9E6;    /* Fundo suave com tom amarelo */
  --educare-yellow-text: #8A5700;    /* Amarelo de alto contraste para leitura */

  --educare-blue-deep: #151B4F;      /* Azul escuro nobre (contorno do logo e uniforme) */
  --educare-blue: #1D357F;           /* Azul institucional */
  --educare-blue-bright: #0288D1;     /* Azul celeste para destaques */
  --educare-blue-soft: #E8F1FC;

  /* Cores Vivas do Logo (As figuras dançantes e confetes) */
  --educare-red: #E53935;            /* Vermelho vibrante */
  --educare-red-soft: #FFEBEE;
  --educare-green: #00A859;          /* Verde natureza e quintal */
  --educare-green-deep: #0E6B38;
  --educare-green-soft: #E8F8F0;
  --educare-orange: #FF7A00;         /* Laranja acolhedor */
  --educare-orange-soft: #FFF3E0;
  --educare-purple: #7C4DFF;         /* Roxo lúdico */
  --educare-purple-soft: #F3E8FF;
  --educare-cyan: #00B4D8;           /* Ciano refrescante */

  /* Fundos & Estrutura */
  --bg-canvas: #FAF8F2;              /* Creme sutil e aconchegante */
  --bg-surface: #FFFFFF;
  --bg-surface-glass: rgba(255, 255, 255, 0.92);
  --bg-surface-alt: #F4EFE6;
  --bg-dark-forest: #0D281E;         /* Fundo escuro para momentos de segurança/foco */
  --bg-navy-deep: #0E1338;           /* Fundo escuro azul para alto impacto */

  /* Tipografia & Contraste */
  --text-main: #131735;              /* Azul marinho quase preto para leitura perfeita */
  --text-muted: #535B6D;             /* Cinza-azulado elegante */
  --text-light: #F8FAFC;
  --text-on-yellow: #151B4F;         /* Texto legível sobre amarelo sempre escuro */

  /* Bordas e Sombras Orgânicas */
  --border-subtle: rgba(21, 27, 79, 0.08);
  --border-yellow: rgba(255, 196, 0, 0.45);
  --border-blue: rgba(29, 53, 127, 0.25);

  --shadow-card: 0 10px 30px -6px rgba(21, 27, 79, 0.07), 0 4px 10px rgba(0, 0, 0, 0.02);
  --shadow-hover: 0 20px 40px -10px rgba(21, 27, 79, 0.14), 0 8px 16px rgba(0, 0, 0, 0.03);
  --shadow-glow-yellow: 0 0 28px rgba(255, 196, 0, 0.35);
  --shadow-glow-blue: 0 0 28px rgba(2, 136, 209, 0.25);

  /* Raios e Formas Amigáveis */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 9999px;

  /* Fontes */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transições Suaves */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}