/* Dark mode — triggered by [data-theme="dark"] or html.dark */
:root[data-theme="dark"], html.dark {
  --bg:           #0E0E10;
  --bg-card:      #18181B;
  --bg-soft:      #1F1F23;
  --bg-3:         #161618;
  --bg-app:       #0A0A0C;
  --bg-2:         #18181B;
  --bg-editor:    #0F0F12;
  --bg-preview:   #0E0E10;
  --bg-input:     #18181B;

  --fg:           #F4F4F5;
  --fg-mid:       #E4E4E7;
  --fg-soft:      #A1A1AA;
  --fg-mute:      #71717A;
  --fg-faint:     #52525B;

  --line:         #27272A;
  --line-soft:    #1E1E22;
  --line-strong:  #3F3F46;
  --line-2:       #2A2A2A;

  --dark:         #0A0A0A;
  --dark-2:       #050505;

  /* Backward compat */
  --text:         #F4F4F5;
  --text-inv:     #0D0D0D;
  --muted:        #A1A1AA;
  --border:       #27272A;
  --surface:      #18181B;

  --heat-0:       #1F1F23;
  --heat-1:       rgba(0,199,125,.28);
  --heat-2:       rgba(0,199,125,.48);
  --heat-3:       rgba(0,199,125,.72);
  --heat-4:       var(--accent);

  --sev-hi-soft:  rgba(239,68,68,.18);
  --sev-md-soft:  rgba(245,158,11,.18);
  --sev-lo-soft:  rgba(107,114,128,.18);
  --mod-soft:     rgba(168,85,247,.18);

  color-scheme: dark;
}

/* Terminal hero — dark mode (terminal crema invertida) */
:root[data-theme="dark"] .hero-terminal,
html.dark .hero-terminal {
  background: #F5F3EE;
  border-color: #D6D2C8;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .hero-term-bar,
html.dark .hero-term-bar {
  background: #EDE9E0;
  border-bottom-color: #D6D2C8;
}
:root[data-theme="dark"] .hero-term-body,
html.dark .hero-term-body { color: #52525B; }
:root[data-theme="dark"] .hero-term-statusbar,
html.dark .hero-term-statusbar {
  background: #EDE9E0;
  border-top-color: #D6D2C8;
  color: #71717A;
}
:root[data-theme="dark"] .term-bar-title,  html.dark .term-bar-title  { color: #71717A; }
:root[data-theme="dark"] .term-muted,      html.dark .term-muted      { color: #6B7280; }
:root[data-theme="dark"] .term-path,       html.dark .term-path       { color: #1D4ED8; }
:root[data-theme="dark"] .term-cmd,        html.dark .term-cmd        { color: #18181B; }
:root[data-theme="dark"] .term-comment,    html.dark .term-comment    { color: #A1A1AA; }
:root[data-theme="dark"] .term-dim,        html.dark .term-dim        { color: #71717A; }
:root[data-theme="dark"] .term-title,      html.dark .term-title      { color: #27272A; }
:root[data-theme="dark"] .term-sep,        html.dark .term-sep        { color: #D1CEC8; }
:root[data-theme="dark"] .term-type-tutorial, html.dark .term-type-tutorial { color: #1D4ED8; }
:root[data-theme="dark"] .term-type-question, html.dark .term-type-question { color: #92400E; }
:root[data-theme="dark"] .term-type-humor,    html.dark .term-type-humor    { color: #9D174D; }
:root[data-theme="dark"] .term-type-resource, html.dark .term-type-resource { color: #5B21B6; }

:root[data-theme="dark"] body, html.dark body {
  background: var(--bg);
  color: var(--fg);
}

:root[data-theme="dark"] ::selection, html.dark ::selection {
  background: color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--fg);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb {
  background: var(--line-strong);
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
html.dark select,
html.dark input,
html.dark textarea {
  color: var(--fg);
  background-color: var(--bg-card);
}

:root[data-theme="dark"] select option,
html.dark select option {
  background: var(--bg-card);
  color: var(--fg);
}