/**
 * Tokens do Projeto Gbalá — todas as custom properties do design system
 * (design-system-gbala.md). Nenhuma cor, fonte ou medida deve ser
 * hardcoded fora daqui nos outros arquivos de CSS.
 */

:root {
  /* Marca */
  --gb-teal:      #14675A;  /* cor primária */
  --gb-teal-esc:  #0E4A41;  /* hover, foco */
  --gb-teal-clr:  #E4F0EC;  /* fundos suaves, chips */
  --gb-teal-rgb:  20, 103, 90;  /* canais do teal para halos com alfa */

  --gb-ambar:     #E8A317;  /* destaque decorativo — NUNCA texto sobre branco */
  --gb-ambar-esc: #B87D08;  /* variante com contraste suficiente para texto */
  --gb-laranja:   #E2701E;
  --gb-vermelho:  #D9401F;  /* apenas grafismo */

  --gb-tinta:     #161616;  /* texto principal */
  --gb-grafite:   #4A4A48;  /* texto secundário */
  --gb-cinza:     #8A8A85;  /* placeholder, desabilitado */
  --gb-linha:     #DFDCD4;  /* bordas */
  --gb-papel:     #FBF9F4;  /* fundo da página */
  --gb-branco:    #FFFFFF;  /* cards, campos */

  /* Semântica */
  --gb-erro:      #B33A1A;
  --gb-erro-bg:   #FCEDE8;
  --gb-ok:        #14675A;
  --gb-ok-bg:     #E4F0EC;
  --gb-aviso:     #8A5F04;
  --gb-aviso-bg:  #FDF3DC;

  /* Tipografia */
  --fonte:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;

  --t-xs:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
  --t-2xl:  clamp(2.125rem, 1.5rem + 3.2vw, 3.25rem);

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

  --altura-titulo: 1.15;
  --altura-corpo:  1.6;

  /* Espaçamento, raio, sombra */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;
  --e-4: 1rem;     --e-6: 1.5rem;   --e-8: 2rem;
  --e-12: 3rem;    --e-16: 4rem;    --e-24: 6rem;

  --raio-sm: 6px;
  --raio:    12px;
  --raio-lg: 20px;
  --raio-pill: 999px;

  --sombra-1: 0 1px 2px rgba(22,22,22,.06), 0 2px 8px rgba(22,22,22,.05);
  --sombra-2: 0 4px 16px rgba(22,22,22,.10);
  --foco: 0 0 0 3px rgba(20,103,90,.35);
}