/* ============================================================
   MedAlerta — Temas
   Claro / Escuro / Automático
   ============================================================ */

/* ── Tema Claro (padrão) ─────────────────────────────────── */
[data-theme="light"],
:root {
  --bg-app:         var(--color-neutral-50);
  --bg-surface:     var(--color-neutral-0);
  --bg-surface-2:   var(--color-neutral-100);
  --bg-surface-3:   var(--color-neutral-200);
  --bg-overlay:     rgba(0, 0, 0, 0.4);
  --bg-glass:       rgba(255, 255, 255, 0.7);
  --bg-glass-border:rgba(255, 255, 255, 0.9);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary:  var(--color-neutral-400);
  --text-inverse:   var(--color-neutral-0);
  --text-on-primary:var(--color-neutral-0);

  --border-subtle:  var(--color-neutral-100);
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);

  --brand:          var(--color-primary-500);
  --brand-hover:    var(--color-primary-600);
  --brand-active:   var(--color-primary-700);
  --brand-subtle:   var(--color-primary-50);

  --nav-bg:         var(--color-neutral-0);
  --nav-border:     var(--color-neutral-200);
  --nav-active:     var(--color-primary-500);
  --nav-inactive:   var(--color-neutral-400);

  --card-bg:        var(--color-neutral-0);
  --card-shadow:    var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --input-bg:       var(--color-neutral-0);
  --input-border:   var(--color-neutral-300);
  --input-focus-border: var(--color-primary-500);
  --input-focus-shadow: 0 0 0 3px hsl(199, 89%, 48%, 0.2);

  --scrollbar-track:var(--color-neutral-100);
  --scrollbar-thumb:var(--color-neutral-300);

  color-scheme: light;
}

/* ── Tema Escuro ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app:         var(--color-neutral-950);
  --bg-surface:     var(--color-neutral-900);
  --bg-surface-2:   var(--color-neutral-800);
  --bg-surface-3:   var(--color-neutral-700);
  --bg-overlay:     rgba(0, 0, 0, 0.7);
  --bg-glass:       rgba(18, 22, 30, 0.75);
  --bg-glass-border:rgba(255, 255, 255, 0.08);

  --text-primary:   hsl(210, 20%, 95%);
  --text-secondary: var(--color-neutral-400);
  --text-tertiary:  var(--color-neutral-500);
  --text-inverse:   var(--color-neutral-900);
  --text-on-primary:var(--color-neutral-0);

  --border-subtle:  rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --brand:          var(--color-primary-400);
  --brand-hover:    var(--color-primary-300);
  --brand-active:   var(--color-primary-200);
  --brand-subtle:   hsl(199, 89%, 48%, 0.15);

  --nav-bg:         var(--color-neutral-900);
  --nav-border:     rgba(255, 255, 255, 0.08);
  --nav-active:     var(--color-primary-400);
  --nav-inactive:   var(--color-neutral-500);

  --card-bg:        var(--color-neutral-900);
  --card-shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
  --card-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

  --input-bg:       var(--color-neutral-800);
  --input-border:   rgba(255, 255, 255, 0.12);
  --input-focus-border: var(--color-primary-400);
  --input-focus-shadow: 0 0 0 3px hsl(199, 89%, 55%, 0.25);

  --scrollbar-track:var(--color-neutral-800);
  --scrollbar-thumb:var(--color-neutral-600);

  /* Sombras mais visíveis no escuro */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  color-scheme: dark;
}

/* ── Tema Automático (segue o sistema) ───────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-app:         var(--color-neutral-950);
    --bg-surface:     var(--color-neutral-900);
    --bg-surface-2:   var(--color-neutral-800);
    --bg-surface-3:   var(--color-neutral-700);
    --bg-overlay:     rgba(0, 0, 0, 0.7);
    --bg-glass:       rgba(18, 22, 30, 0.75);
    --bg-glass-border:rgba(255, 255, 255, 0.08);

    --text-primary:   hsl(210, 20%, 95%);
    --text-secondary: var(--color-neutral-400);
    --text-tertiary:  var(--color-neutral-500);
    --text-inverse:   var(--color-neutral-900);
    --text-on-primary:var(--color-neutral-0);

    --border-subtle:  rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);

    --brand:          var(--color-primary-400);
    --brand-hover:    var(--color-primary-300);
    --brand-active:   var(--color-primary-200);
    --brand-subtle:   hsl(199, 89%, 48%, 0.15);

    --nav-bg:         var(--color-neutral-900);
    --nav-border:     rgba(255, 255, 255, 0.08);
    --nav-active:     var(--color-primary-400);
    --nav-inactive:   var(--color-neutral-500);

    --card-bg:        var(--color-neutral-900);
    --card-shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
    --card-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    --input-bg:       var(--color-neutral-800);
    --input-border:   rgba(255, 255, 255, 0.12);
    --input-focus-border: var(--color-primary-400);
    --input-focus-shadow: 0 0 0 3px hsl(199, 89%, 55%, 0.25);

    --scrollbar-track:var(--color-neutral-800);
    --scrollbar-thumb:var(--color-neutral-600);

    --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

    color-scheme: dark;
  }
}