/* Tokens de design do NIMAC — cores, espaçamento, raio e sombra.
   A cor da marca é sobrescrita em tempo de execução por js/theme.js,
   a partir do brand_color configurado em Configurações (mesma ideia
   que existia via CSS var no frontend React anterior). */

:root {
  /* Marca (valor padrão; theme.js recalcula os tons a partir do hex salvo) */
  --brand-50: 239, 246, 255;
  --brand-100: 219, 234, 254;
  --brand-200: 191, 219, 254;
  --brand-300: 147, 197, 253;
  --brand-400: 96, 165, 250;
  --brand-500: 59, 130, 246;
  --brand-600: 37, 99, 235;
  --brand-700: 29, 78, 216;
  --brand-800: 30, 64, 175;
  --brand-900: 30, 58, 138;
  --brand-950: 23, 37, 84;

  --color-white: 255, 255, 255;
  --color-black: 0, 0, 0;

  --gray-50: 249, 250, 251;
  --gray-100: 243, 244, 246;
  --gray-200: 229, 231, 235;
  --gray-300: 209, 213, 219;
  --gray-400: 156, 163, 175;
  --gray-500: 107, 114, 128;
  --gray-600: 75, 85, 99;
  --gray-700: 55, 65, 81;
  --gray-800: 31, 41, 55;
  --gray-900: 17, 24, 39;
  --gray-950: 3, 7, 18;

  --green-50: 240, 253, 244;
  --green-600: 22, 163, 74;
  --green-700: 21, 128, 61;
  --green-950: 5, 46, 22;

  --purple-50: 250, 245, 255;
  --purple-600: 147, 51, 234;
  --purple-950: 59, 7, 100;

  --amber-50: 255, 251, 235;
  --amber-600: 217, 119, 6;
  --amber-700: 180, 83, 9;
  --amber-950: 69, 39, 7;

  --red-600: 220, 38, 38;

  /* Raio e sombra — "Direção B: suave com cor" */
  --radius-sm: 0.75rem;   /* rounded-xl */
  --radius-lg: 1rem;      /* rounded-2xl */
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);

  /* Superfícies (modo claro) */
  --surface: rgb(var(--color-white));
  --surface-muted: rgb(var(--gray-50));
  --text-primary: rgb(var(--gray-900));
  --text-secondary: rgb(var(--gray-500));
  --text-muted: rgb(var(--gray-400));
  --border: rgb(var(--gray-200));
  --border-strong: rgb(var(--gray-300));
  --bg-page: rgb(var(--gray-50));
}

[data-theme='dark'] {
  --surface: rgb(var(--gray-800));
  --surface-muted: rgb(var(--gray-900));
  --text-primary: rgb(var(--gray-100));
  --text-secondary: rgb(var(--gray-400));
  --text-muted: rgb(var(--gray-500));
  --border: rgb(var(--gray-700));
  --border-strong: rgb(var(--gray-600));
  --bg-page: rgb(var(--gray-950));
}