/* SisÁgua Controle — tokens da marca (framework-agnóstico).
   Importe uma vez (ex.: em app.css) e use as variáveis nos componentes/estilos custom.
   Para as cores nativas do Fluent UI, veja README → “Aplicar no Fluent UI Blazor”. */

:root {
  /* ---- Azul Água (primária) ---- */
  --sac-blue-900: #06304A;
  --sac-blue-700: #0B5C8A;   /* cor da marca / accent base */
  --sac-blue-500: #1B7FB8;
  --sac-blue-300: #6FB7E8;
  --sac-blue-100: #DCEDF8;

  /* ---- Verde-água (meio do degradê; base do accent do Fluent) ---- */
  --sac-teal-700: #137F8B;
  --sac-teal-900: #0F6A74;

  /* ---- Verde Ambiental (secundária) ---- */
  --sac-green-900: #0B4B37;
  --sac-green-700: #147A5A;
  --sac-green-500: #1FA37A;
  --sac-green-300: #6FD1B0;
  --sac-green-100: #D5F0E5;

  /* ---- Ardósia (neutros) ---- */
  --sac-ink:       #0E1B24;  /* texto principal / headers escuros */
  --sac-slate-700: #33454F;  /* texto de corpo */
  --sac-slate-500: #5E6E77;  /* texto secundário */
  --sac-slate-300: #A9B6BD;  /* desabilitado / ícones fracos */
  --sac-slate-200: #D7DFE3;  /* bordas de input */
  --sac-slate-100: #EDF2F4;  /* divisores */
  --sac-slate-50:  #F6F9FA;  /* fundo da página */
  --sac-border:    #E4EBEE;  /* borda padrão de card */

  /* ---- Semânticos ---- */
  --sac-success: #1FA37A;
  --sac-info:    #1B7FB8;
  --sac-warning: #E0A22B;
  --sac-danger:  #D64550;

  /* ---- Degradê da marca (140°) ---- */
  --sac-gradient: linear-gradient(140deg, #0B5C8A 0%, #137F8B 52%, #1FA37A 100%);

  /* Variante para superfícies que carregam texto/ícone branco (barra superior,
     botões primários). Mesma jornada azul → verde-água → verde, mas fechando no
     verde-700: sobre o verde-500 o texto branco fica em 3.2:1 e reprova no AA. */
  --sac-gradient-ui:       linear-gradient(140deg, #0B5C8A 0%, #137F8B 55%, #147A5A 100%);
  --sac-gradient-ui-hover: linear-gradient(140deg, #06304A 0%, #0F6A74 55%, #0F6247 100%);

  /* ---- Tipografia ---- */
  --sac-font-display: 'Space Grotesk', system-ui, sans-serif; /* títulos + logotipo */
  --sac-font-body:    'Manrope', system-ui, sans-serif;       /* corpo + interface */
  --sac-font-mono:    'IBM Plex Mono', ui-monospace, monospace;/* dados técnicos */

  /* ---- Raios ---- */
  --sac-radius-sm: 8px;
  --sac-radius-md: 12px;
  --sac-radius-lg: 16px;
  --sac-radius-pill: 999px;

  /* ---- Sombras ---- */
  --sac-shadow-sm: 0 1px 2px rgba(14,27,36,.04);
  --sac-shadow-md: 0 18px 40px -26px rgba(14,27,36,.20);
  --sac-shadow-brand: 0 14px 30px -12px rgba(17,116,116,.55);

  /* ---- Escala de espaçamento (base 4px) ---- */
  --sac-space-1: 4px;  --sac-space-2: 8px;  --sac-space-3: 12px;
  --sac-space-4: 16px; --sac-space-5: 20px; --sac-space-6: 24px;
  --sac-space-8: 32px; --sac-space-10: 40px; --sac-space-16: 64px;
}