/* ═════════════════════════════════════════════════════════════
   Bedside — Design Tokens
   Fonte única da verdade para cores, tipografia e espaçamento.
   Todos os componentes do app devem consumir estas variáveis.
   ═════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primária (teal) ───────────────────────────────────── */
  --color-primary:          #0F766E;
  --color-primary-dark:     #134E4A;
  --color-primary-light:    #CCFBF1;
  --color-primary-surface:  #F0FDFA;

  /* ─── Acento (amber — categoria vasoativas + CTAs) ──────── */
  --color-accent:           #D97706;
  --color-accent-dark:      #B45309;

  /* ─── Estados clínicos ──────────────────────────────────── */
  --color-critical:         #DC2626;
  --color-warning:          #F59E0B;
  --color-success:          #059669;

  /* ─── Neutros ───────────────────────────────────────────── */
  --color-background:       #FAFAF9;
  --color-surface:          #FFFFFF;
  --color-text-primary:     #0A0A0A;
  --color-text-secondary:   #404040;
  --color-text-tertiary:    #737373;
  --color-border:           #E5E5E5;
  --color-border-strong:    #D4D4D4;

  /* ─── Glows / overlays com alfa ─────────────────────────── */
  --color-primary-glow:     rgba(15, 118, 110, 0.12);
  --color-primary-glow-2:   rgba(15, 118, 110, 0.22);
  --color-accent-glow:      rgba(217, 119, 6, 0.10);
  --color-critical-glow:    rgba(220, 38, 38, 0.10);
  --color-warning-glow:     rgba(245, 158, 11, 0.12);
  --color-success-glow:     rgba(5, 150, 105, 0.10);

  /* ─── Tipografia ────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-numeric: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ─── Raios e áreas seguras ─────────────────────────────── */
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius: var(--radius-lg);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ─── Alturas mínimas de toque (app médico à beira leito) ─ */
  --touch-target: 44px;
  --input-height: 48px;

  /* ═════════════════════════════════════════════════════════
     ALIASES LEGADOS — para compatibilidade com inline <style>
     nos HTMLs existentes. Todos apontam para tokens novos.
     ═════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --bg:      var(--color-background);
  --bg2:     var(--color-surface);
  --bg3:     var(--color-primary-surface);

  /* Paineis e bordas */
  --panel:   var(--color-surface);
  --border:  var(--color-border);
  --border2: var(--color-border-strong);

  /* Primária (era cyan) */
  --cyan:       var(--color-primary);
  --cyan-dim:   var(--color-primary-dark);
  --cyan-glow:  var(--color-primary-glow);
  --cyan-glow2: var(--color-primary-glow-2);

  /* Estados */
  --green:     var(--color-success);
  --green-dim: var(--color-success-glow);
  --amber:     var(--color-accent);
  --amber-dim: var(--color-accent-glow);
  --red:       var(--color-critical);
  --red-dim:   var(--color-critical-glow);

  /* Texto */
  --text:  var(--color-text-primary);
  --text2: var(--color-text-secondary);
  --text3: var(--color-text-tertiary);

  /* Purple legado (mantido neutro até refatorar) */
  --purple:        #6d28d9;
  --purple-dim:    rgba(109, 40, 217, 0.08);
  --purple-border: rgba(109, 40, 217, 0.25);
}

/* ═════════════════════════════════════════════════════════════
   Dark mode automático (prefers-color-scheme: dark)
   ═════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Manter o teal escuro #0F766E em todo o app — mesma cor do light mode,
       mais sóbrio que o #14B8A6 fluorescente. Bom contraste com branco. */
    --color-primary:         #0F766E;
    --color-primary-dark:    #134E4A;
    --color-primary-light:   #134E4A;
    --color-primary-surface: #042F2E;

    /* Neutros invertidos */
    --color-background:      #0A0A0A;
    --color-surface:         #171717;
    --color-text-primary:    #FAFAF9;
    --color-text-secondary:  #A3A3A3;
    --color-text-tertiary:   #737373;
    --color-border:          #262626;
    --color-border-strong:   #404040;

    /* Glows */
    --color-primary-glow:    rgba(15, 118, 110, 0.20);
    --color-primary-glow-2:  rgba(15, 118, 110, 0.30);
  }
}

/* Override manual — classe .theme-light ou .theme-dark no <html> */
html[data-theme="light"] {
  color-scheme: light;
  --color-primary:         #0F766E;
  --color-primary-dark:    #134E4A;
  --color-primary-light:   #CCFBF1;
  --color-primary-surface: #F0FDFA;
  --color-background:      #FAFAF9;
  --color-surface:         #FFFFFF;
  --color-text-primary:    #0A0A0A;
  --color-text-secondary:  #404040;
  --color-text-tertiary:   #737373;
  --color-border:          #E5E5E5;
  --color-border-strong:   #D4D4D4;
  --color-primary-glow:    rgba(15, 118, 110, 0.12);
  --color-primary-glow-2:  rgba(15, 118, 110, 0.22);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary:         #0F766E;
  --color-primary-dark:    #134E4A;
  --color-primary-light:   #134E4A;
  --color-primary-surface: #042F2E;
  --color-background:      #0A0A0A;
  --color-surface:         #171717;
  --color-text-primary:    #FAFAF9;
  --color-text-secondary:  #A3A3A3;
  --color-text-tertiary:   #737373;
  --color-border:          #262626;
  --color-border-strong:   #404040;
  --color-primary-glow:    rgba(15, 118, 110, 0.20);
  --color-primary-glow-2:  rgba(15, 118, 110, 0.30);
}