/* ============================================================
   VARIÁVEIS GLOBAIS — KIDS Centro Educacional
   Sistema de design completo: cores, tipografia, espaçamentos
   ============================================================ */

:root {

  /* -------- CORES DA MARCA -------- */
  --cor-verde:         #00A470;   /* Verde principal — CTA, destaque */
  --cor-verde-hover:   #008F60;   /* Verde escuro para hover */
  --cor-azul:          #00A4C8;   /* Azul — confiança, educação */
  --cor-azul-hover:    #0090B0;   /* Azul escuro para hover */
  --cor-amarelo:       #F2C917;   /* Amarelo — calor, infância */
  --cor-vermelho:      #E94E3C;   /* Vermelho — energia, presença */

  /* -------- BASE / NEUTROS -------- */
  --cor-creme:          #F5F1E1;  /* Fundo principal — sofisticado e quente */
  --cor-creme-escura:   #EBE6D4;  /* Fundo alternativo, divisórias */
  --cor-branca:         #ffffff;
  --cor-escura:         #0D1B1A;  /* Fundo escuro premium */

  /* -------- TEXTO -------- */
  --cor-primaria:       #111820;  /* Texto principal — quase preto */
  --cor-primaria-clara: #1E2D3A;  /* Texto escuro suave */
  --cor-texto:          #111820;
  --cor-texto-suave:    #5E6B72;  /* Legendas, subtítulos */
  --cor-texto-claro:    #8A9399;  /* Placeholders */

  /* -------- UI -------- */
  --cor-destaque:       #00A470;  /* Verde — cor principal de ação */
  --cor-destaque-clara: #00C084;  /* Verde mais vivo para hover */
  --cor-borda:          #E0DAC8;  /* Bordas e separadores */
  --cor-borda-suave:    #EDE8D8;  /* Bordas mais sutis */

  /* -------- TIPOGRAFIA -------- */
  --fonte-principal: "Plus Jakarta Sans", "DM Sans", -apple-system, sans-serif;
  --fonte-titulo:    "Plus Jakarta Sans", "DM Sans", -apple-system, sans-serif;
  --fonte-corpo:     "Plus Jakarta Sans", "DM Sans", -apple-system, sans-serif;

  /* -------- ESCALA TIPOGRÁFICA -------- */
  --texto-mini:       0.6875rem;  /* 11px */
  --texto-pequeno:    0.875rem;   /* 14px */
  --texto-base:       1rem;       /* 16px */
  --texto-medio:      1.125rem;   /* 18px */
  --texto-grande:     1.375rem;   /* 22px */
  --titulo-pequeno:   1.875rem;   /* 30px */
  --titulo-medio:     2.5rem;     /* 40px */
  --titulo-grande:    3.5rem;     /* 56px */
  --titulo-display:   5rem;       /* 80px */

  /* -------- ESPAÇAMENTOS -------- */
  --espaco-mini:      0.5rem;
  --espaco-pequeno:   1rem;
  --espaco-medio:     2rem;
  --espaco-grande:    4rem;
  --espaco-secao:     7rem;
  --espaco-extra:     9rem;

  /* -------- LAYOUT -------- */
  --largura-conteudo: 1200px;
  --largura-estreita:  860px;

  /* -------- BORDAS -------- */
  --raio-pequeno:  6px;
  --raio-medio:    14px;
  --raio-grande:   24px;
  --raio-extra:    40px;
  --raio-pilula:   999px;

  /* -------- SOMBRAS -------- */
  --sombra-suave:  0 2px 16px rgba(17, 24, 32, 0.05);
  --sombra-media:  0 8px 40px rgba(17, 24, 32, 0.09);
  --sombra-forte:  0 24px 80px rgba(17, 24, 32, 0.14);
  --sombra-verde:  0 8px 32px rgba(0, 164, 112, 0.25);

  /* -------- TRANSIÇÕES -------- */
  --transicao-rapida: 180ms ease;
  --transicao-padrao: 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transicao-lenta:  640ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* -------- Z-INDEX -------- */
  --camada-base:   1;
  --camada-acima:  10;
  --camada-menu:   100;
  --camada-modal:  1000;
}