/* ============================================================
   theme.css — ProthesisLab · Tema Central
   ============================================================

   COMO TROCAR O TEMA:
   1. Escolha um bloco da BIBLIOTECA DE TEMAS abaixo
   2. Copie as variáveis do bloco desejado
   3. Cole substituindo o conteúdo do :root {} ATIVO (linha 22)
   4. Salve — o site inteiro muda automaticamente

   Para os temas DARK: você pode ativar pelo botão 🌙 no
   sistema (modo escuro automático), ou colar as variáveis
   do bloco DARK diretamente no :root para forçar o tema
   escuro sem precisar do toggle.
   ============================================================ */


/* ============================================================
   TEMA ATIVO — edite aqui para mudar o site
   ============================================================ */
:root {

  /* ▼▼▼ COLE O BLOCO DO TEMA ESCOLHIDO AQUI ▼▼▼ */

  /* VERDE LIGHT (padrão) */
  --primary:      #1a7a3c;
  --primary-2:    #22a050;
  --primary-3:    #d4eed9;
  --primary-4:    #eaf5ec;
  --primary-glow: rgba(26,122,60,.12);
  --bg:           #f4f6f4;
  --surface:      #ffffff;
  --surface-2:    #f4faf5;
  --surface-3:    #eaf5ec;
  --border:       #dde8dd;
  --border-2:     #c3d9c3;
  --text:         #111c11;
  --text-2:       #3d5c3d;
  --text-3:       #7a9a7a;

  /* ▲▲▲ FIM DO BLOCO DO TEMA ▲▲▲ */

  /* ── Cores de estado (fixas — dinâmicas no Dark Mode) ────*/
  --red:           #dc2626;
  --red-bg:        #fef2f2;
  --red-dim:       rgba(220,38,38,.15);
  
  --blue:          #2563eb;
  --blue-bg:       #eff6ff;
  --blue-dim:      rgba(37,99,235,.15);
  
  --amber:         #d97706;
  --amber-bg:      #fffbeb;
  --amber-dim:     rgba(217,119,6,.15);
  
  --green-ok:      #16a34a;
  --green-bg:      #f0fdf4;
  --green-dim:     rgba(22,163,74,.15);

  /* ── Tipografia ──────────────────────────────────────────*/
  --font-ui:       'Plus Jakarta Sans', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ── Arredondamentos ─────────────────────────────────────*/
  --r:    8px;
  --r2:  14px;
  --r3:  20px;

  /* ── Sombras ─────────────────────────────────────────────*/
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);

  /* ── Layout ──────────────────────────────────────────────*/
  --sb-w: 240px;

  /* ── Aliases internos (não alterar) ─────────────────────*/
  --accent:      var(--primary);
  --accent-dim:  var(--primary-2);
  --accent-glow: var(--primary-glow);
  --sb-green:    var(--primary);
  --sb-green-2:  var(--primary-2);
  --sb-green-3:  var(--primary-3);
  --sb-green-4:  var(--primary-4);
}


/* ============================================================
   MODO ESCURO AUTOMÁTICO
   Visibilidade melhorada: Contrastes de texto mais claros e
   fundos de alerta dinâmicos mixados com a surface.
   ============================================================ */
[data-theme="dark"] {
  --bg:        color-mix(in srgb, var(--primary)  5%, #0b0f17);
  --surface:   color-mix(in srgb, var(--primary)  8%, #111824);
  --surface-2: color-mix(in srgb, var(--primary) 12%, #172030);
  --surface-3: color-mix(in srgb, var(--primary) 18%, #1e293b);
  --border:    color-mix(in srgb, var(--primary) 20%, #293548);
  --border-2:  color-mix(in srgb, var(--primary) 35%, #3b4b66);

  /* Textos mais vibrantes para não sumirem no fundo escuro */
  --text:      #f8fafc;
  --text-2:    #cbd5e1;
  --text-3:    #94a3b8;

  --primary-3: color-mix(in srgb, var(--primary) 45%, #111824);
  --primary-4: color-mix(in srgb, var(--primary) 20%, #111824);
  --primary-glow: color-mix(in srgb, var(--primary) 30%, transparent);

  /* Cores de status otimizadas para fundos escuros */
  --red:       #f87171;
  --red-bg:    color-mix(in srgb, var(--red) 12%, var(--surface));
  --red-dim:   color-mix(in srgb, var(--red) 25%, var(--surface));

  --blue:      #60a5fa;
  --blue-bg:   color-mix(in srgb, var(--blue) 12%, var(--surface));
  --blue-dim:  color-mix(in srgb, var(--blue) 25%, var(--surface));

  --amber:     #fbbf24;
  --amber-bg:  color-mix(in srgb, var(--amber) 12%, var(--surface));
  --amber-dim: color-mix(in srgb, var(--amber) 25%, var(--surface));

  --green-ok:  #4ade80;
  --green-bg:  color-mix(in srgb, var(--green-ok) 12%, var(--surface));
  --green-dim: color-mix(in srgb, var(--green-ok) 25%, var(--surface));

  --shadow-sm: 0 1px 4px rgba(0,0,0,.45);
  --shadow:    0 4px 20px rgba(0,0,0,.55);
  --shadow-md: 0 8px 32px rgba(0,0,0,.65);
}


/* ════════════════════════════════════════════════════════════
   BIBLIOTECA DE TEMAS
   Copie um bloco e cole dentro do :root {} acima.
   ════════════════════════════════════════════════════════════

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  1 · VERDE LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #1a7a3c;
  --primary-2:    #22a050;
  --primary-3:    #d4eed9;
  --primary-4:    #eaf5ec;
  --primary-glow: rgba(26,122,60,.12);
  --bg:           #f4f6f4;
  --surface:      #ffffff;
  --surface-2:    #f4faf5;
  --surface-3:    #eaf5ec;
  --border:       #dde8dd;
  --border-2:     #c3d9c3;
  --text:         #111c11;
  --text-2:       #3d5c3d;
  --text-3:       #7a9a7a;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  1 · VERDE DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #22c55e;
  --primary-2:    #4ade80;
  --primary-3:    #14532d;
  --primary-4:    #052e16;
  --primary-glow: rgba(34,197,94,.22);
  --bg:           #030d07;
  --surface:      #071510;
  --surface-2:    #0c1e15;
  --surface-3:    #112a1c;
  --border:       #163524;
  --border-2:     #1e4d32;
  --text:         #ecfdf5;
  --text-2:       #86efac;
  --text-3:       #365f46;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  2 · ROXO LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #6d28d9;
  --primary-2:    #7c3aed;
  --primary-3:    #ddd6fe;
  --primary-4:    #f5f3ff;
  --primary-glow: rgba(109,40,217,.12);
  --bg:           #f6f5fb;
  --surface:      #ffffff;
  --surface-2:    #f3f0ff;
  --surface-3:    #ede9fe;
  --border:       #e0d9f5;
  --border-2:     #c4b8e8;
  --text:         #1a0a2e;
  --text-2:       #4c3575;
  --text-3:       #9b85c4;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  2 · ROXO DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #a78bfa;
  --primary-2:    #c4b5fd;
  --primary-3:    #3b1f7a;
  --primary-4:    #1e0d3a;
  --primary-glow: rgba(167,139,250,.22);
  --bg:           #0d0818;
  --surface:      #140f26;
  --surface-2:    #1c1636;
  --surface-3:    #241e44;
  --border:       #2a2248;
  --border-2:     #3a305e;
  --text:         #f0ebff;
  --text-2:       #b8aee8;
  --text-3:       #6b5fa0;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  3 · AZUL LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #1d4ed8;
  --primary-2:    #2563eb;
  --primary-3:    #bfdbfe;
  --primary-4:    #eff6ff;
  --primary-glow: rgba(29,78,216,.12);
  --bg:           #f5f7fb;
  --surface:      #ffffff;
  --surface-2:    #f0f5ff;
  --surface-3:    #e8f0fe;
  --border:       #d4dfee;
  --border-2:     #b8cce0;
  --text:         #0f172a;
  --text-2:       #334155;
  --text-3:       #7a9ab8;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  3 · AZUL DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #60a5fa;
  --primary-2:    #93c5fd;
  --primary-3:    #1e3a5f;
  --primary-4:    #0d1f36;
  --primary-glow: rgba(96,165,250,.22);
  --bg:           #050d18;
  --surface:      #0c1524;
  --surface-2:    #111e30;
  --surface-3:    #172540;
  --border:       #1e2e48;
  --border-2:     #284060;
  --text:         #e8f4ff;
  --text-2:       #93c5fd;
  --text-3:       #3b5f85;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  4 · TEAL LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #0f766e;
  --primary-2:    #0d9488;
  --primary-3:    #99f6e4;
  --primary-4:    #f0fdfa;
  --primary-glow: rgba(15,118,110,.12);
  --bg:           #f4f9f9;
  --surface:      #ffffff;
  --surface-2:    #f0faf9;
  --surface-3:    #e6f7f5;
  --border:       #cce8e5;
  --border-2:     #99d0cc;
  --text:         #0c1f1e;
  --text-2:       #2d5c59;
  --text-3:       #6a9e9b;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  4 · TEAL DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #2dd4bf;
  --primary-2:    #5eead4;
  --primary-3:    #134e4a;
  --primary-4:    #042f2e;
  --primary-glow: rgba(45,212,191,.22);
  --bg:           #030f0e;
  --surface:      #071614;
  --surface-2:    #0c1e1c;
  --surface-3:    #112926;
  --border:       #163330;
  --border-2:     #1f4540;
  --text:         #e8fffe;
  --text-2:       #5eead4;
  --text-3:       #2d6660;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  5 · LARANJA LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #b45309;
  --primary-2:    #d97706;
  --primary-3:    #fde68a;
  --primary-4:    #fffbeb;
  --primary-glow: rgba(180,83,9,.12);
  --bg:           #faf8f4;
  --surface:      #ffffff;
  --surface-2:    #fdf8ee;
  --surface-3:    #fef3c7;
  --border:       #e8dfc8;
  --border-2:     #d4c49a;
  --text:         #1c1209;
  --text-2:       #5c3d10;
  --text-3:       #9a7a40;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  5 · LARANJA DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #fb923c;
  --primary-2:    #fdba74;
  --primary-3:    #7c2d12;
  --primary-4:    #431407;
  --primary-glow: rgba(251,146,60,.22);
  --bg:           #100904;
  --surface:      #1c100a;
  --surface-2:    #271710;
  --surface-3:    #321e15;
  --border:       #3f2518;
  --border-2:     #56331f;
  --text:         #fff7ed;
  --text-2:       #fdba74;
  --text-3:       #7c4a28;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  6 · SLATE LIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #334155;
  --primary-2:    #475569;
  --primary-3:    #cbd5e1;
  --primary-4:    #f1f5f9;
  --primary-glow: rgba(51,65,85,.12);
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface-2:    #f1f4f8;
  --surface-3:    #e8ecf2;
  --border:       #dae0ea;
  --border-2:     #c0cad8;
  --text:         #0f172a;
  --text-2:       #334155;
  --text-3:       #7a8fa8;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  6 · SLATE DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  --primary:      #94a3b8;
  --primary-2:    #cbd5e1;
  --primary-3:    #1e293b;
  --primary-4:    #0f172a;
  --primary-glow: rgba(148,163,184,.15);
  --bg:           #060a10;
  --surface:      #0d1117;
  --surface-2:    #141b24;
  --surface-3:    #1c2530;
  --border:       #1e2d3d;
  --border-2:     #2a3f54;
  --text:         #e8edf4;
  --text-2:       #94a3b8;
  --text-3:       #3a4e64;

*/