/* =========================================
   Elosaúde – Themes
   Paletas claro/escuro com contraste reforçado
   ========================================= */

/* Tema Claro (default) */
:root {
  /* Superfícies e fundo */
  --bg: #f5f6f8;
  --surface-1: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f4;

  /* Tipografia */
  --text: #0f1419;            /* títulos e textos principais */
  --text-secondary: #3f4a56;  /* descrições/legendas */
  --text-muted: #5b6673;      /* menos importante */

  /* Bordas */
  --border: #e3e8ee;
  --border-strong: #cdd6df;

  /* Marca (verde Elosaúde) */
  --brand-50: #e7f8f3;
  --brand-100: #c8efe5;
  --brand-200: #a1e3d2;
  --brand-300: #74d6bf;
  --brand-400: #46c9aa;
  --brand-500: #22bc98;
  --brand-600: #17a589;   /* principal */
  --brand-700: #0f7f68;   /* mais escuro */
  --brand-800: #0c6754;
  --brand-900: #084a3d;

  /* Ação/feedback */
  --focus-ring: #3b82f6;
  --success: #16a34a;
  --warning: #eab308;
  --danger: #dc2626;

  /* Sombra leve (cards no claro) */
  --shadow-1: 0 1px 2px rgba(16, 20, 25, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 20, 25, 0.08);
}

/* Tema Escuro */
:root[data-theme="dark"] {
  --bg: #121212;
  --surface-1: #1b1d1f;
  --surface-2: #222528;
  --surface-3: #2a2e32;

  --text: #f2f5f7;
  --text-secondary: #c3cbd3;
  --text-muted: #a7b0ba;

  --border: #2f3740;
  --border-strong: #3a434d;

  /* Mantém a mesma marca */
  --brand-50: #e7f8f3;
  --brand-100: #c8efe5;
  --brand-200: #a1e3d2;
  --brand-300: #74d6bf;
  --brand-400: #46c9aa;
  --brand-500: #22bc98;
  --brand-600: #17a589;
  --brand-700: #0f7f68;
  --brand-800: #0c6754;
  --brand-900: #084a3d;

  --focus-ring: #60a5fa;

  /* Sombras mais discretas no escuro */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Utilidades de cor (se desejar usar como classes) */
.text-primary { color: var(--brand-600) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.bg-surface-1 { background: var(--surface-1) !important; }
.bg-surface-2 { background: var(--surface-2) !important; }
.bg-surface-3 { background: var(--surface-3) !important; }
.border-base  { border-color: var(--border) !important; }