/* ============================================================
   Casa da Infância — design tokens
   ============================================================

   As cores da marca foram amostradas do arquivo do logo, não
   estimadas a olho.

   Princípio que governa todo este arquivo: a paleta da marca é
   luminosa e de baixa saturação — ótima para Instagram, péssima
   para texto. Aqui ela entra como PREENCHIMENTO e ACENTO; o texto
   fica sempre em tinta escura por cima. Para os casos em que a cor
   precisa carregar texto (link, botão, badge), existe uma variante
   "-forte" escurecida até passar em contraste.

   Uma terapeuta olha esta tela oito horas por dia. Fundo calmo,
   cor só onde ela significa alguma coisa.
   ============================================================ */

:root {
  /* --- Marca (amostradas do logo) ------------------------- */
  --marca-azul:     #84CCE4;
  --marca-rosa:     #F0C0C0;
  --marca-amarelo:  #FCD878;
  --marca-verde:    #C0CC6C;
  --marca-laranja:  #FCA86C;
  --marca-dourado:  #B08D57;

  /* Variantes escurecidas: usar quando a cor precisar carregar
     texto ou ícone. Todas passam em contraste sobre fundo claro. */
  --azul-forte:     #1F6E8C;
  --rosa-forte:     #A8465A;
  --amarelo-forte:  #8A6A12;
  --verde-forte:    #56701A;
  --laranja-forte:  #A8541A;

  /* Tintas suaves: fundo de badge, preenchimento de card. */
  --azul-vago:      #EAF6FB;
  --rosa-vago:      #FCEFF0;
  --amarelo-vago:   #FEF7E4;
  --verde-vago:     #F3F7E6;
  --laranja-vago:   #FEF0E6;

  /* --- Neutros -------------------------------------------- */
  /* Levemente quentes, para conversar com o dourado da marca.
     Cinza puro ao lado dessa paleta fica azulado e frio. */
  --areia:          #FBF8F4;  /* fundo da aplicação */
  --papel:          #FFFFFF;  /* superfície de card */
  --areia-funda:    #F3EEE7;  /* faixas alternadas, hover */
  --linha:          #E8E1D8;  /* bordas e divisores */
  --linha-forte:    #D6CCBE;

  --tinta:          #3A3330;  /* texto principal */
  --tinta-media:    #6B615A;  /* texto secundário */
  --tinta-fraca:    #9A8F86;  /* legendas, placeholder */

  /* --- Estados do sistema --------------------------------- */
  /* Deliberadamente FORA da paleta da marca: erro e sucesso não
     podem competir com as cores das especialidades na agenda. */
  --erro:           #B3261E;
  --erro-vago:      #FCEEED;
  --sucesso:        #2E6B3E;
  --sucesso-vago:   #EDF5EF;
  --atencao:        #8A5A00;
  --atencao-vago:   #FDF4E3;

  /* --- Tipografia ----------------------------------------- */
  /* Baloo 2 tem as mesmas terminações arredondadas do lettering
     do logo — a marca continua na interface sem precisar repetir
     a imagem. Usada só em título e no nome da clínica.
     Nunito Sans carrega o resto: humanista, terminações macias
     que conversam com a Baloo, e algarismos tabulares, que
     importam numa grade de horários. */
  --fonte-marca:  'Baloo 2', 'Trebuchet MS', sans-serif;
  --fonte-texto:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala de 1.25 (terça maior), truncada onde a interface usa. */
  --t-xs:    0.75rem;   /* 12px — legenda, rótulo de campo */
  --t-sm:    0.875rem;  /* 14px — texto de apoio, tabela densa */
  --t-base:  1rem;      /* 16px — corpo */
  --t-lg:    1.25rem;   /* 20px — título de card */
  --t-xl:    1.5rem;    /* 24px — título de página */
  --t-2xl:   2rem;      /* 32px — título de tela de entrada */

  --peso-normal:  400;
  --peso-medio:   600;
  --peso-forte:   700;

  --altura-densa:  1.3;
  --altura-normal: 1.55;

  /* --- Espaçamento ---------------------------------------- */
  /* Base 4px. Nomes por tamanho, não por uso, para não amarrar. */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;

  /* --- Forma ---------------------------------------------- */
  /* Raios generosos: o logo é todo feito de cantos arredondados.
     É onde a marca aparece sem precisar de cor. */
  --raio-sm:   6px;
  --raio-md:   10px;
  --raio-lg:   16px;
  --raio-full: 999px;

  /* Sombras discretas e quentes — sombra cinza sobre fundo areia
     suja a cor. */
  --sombra-sm:  0 1px 2px rgba(58, 51, 48, 0.06);
  --sombra-md:  0 2px 8px rgba(58, 51, 48, 0.08);
  --sombra-lg:  0 8px 24px rgba(58, 51, 48, 0.10);

  /* --- Layout --------------------------------------------- */
  --largura-menu: 248px;
  --altura-topo:  64px;

  /* --- Movimento ------------------------------------------ */
  --transicao: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Cores por especialidade.
   Ficam separadas dos tokens de marca de propósito: a clínica pode
   cadastrar outras especialidades, e essas cores vêm do banco
   (tabela `especialidade.cor`). O que está aqui é só o padrão do
   seed — a interface lê a cor via style inline quando existir. */
:root {
  --esp-fono:          var(--marca-azul);
  --esp-to:            var(--marca-amarelo);
  --esp-psicologia:    var(--marca-rosa);
  --esp-psicopedagogia:var(--marca-verde);
  --esp-outra:         var(--marca-laranja);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 1ms; }
}