/* ============================================================
   themes.css — Light / Dark mode mappings.
   Paleta minimalista azul → verde.
   ============================================================ */

/* ── DARK MODE (default — coherente con identidad tech) ── */
[data-theme="dark"] {
  --bg-primary:     var(--color-neutral-950);
  --bg-secondary:   var(--color-neutral-900);
  --bg-tertiary:    #131C2E;
  --bg-card:        rgba(19, 28, 46, 0.6);
  --bg-card-solid:  var(--color-neutral-800);
  --bg-glass:       rgba(2, 6, 23, 0.72);
  --bg-overlay:     rgba(2, 6, 23, 0.85);
  --bg-elevated:    #0E1729;

  --text-primary:    var(--color-neutral-0);
  --text-secondary:  #B4C0D3;
  --text-tertiary:   var(--color-neutral-400);
  --text-muted:      var(--color-neutral-500);
  --text-inverse:    var(--color-neutral-900);

  --border-color:    rgba(148, 163, 184, 0.12);
  --border-subtle:   rgba(148, 163, 184, 0.06);
  --border-strong:   rgba(148, 163, 184, 0.22);

  --accent-primary:    var(--color-primary-500);
  --accent-secondary:  var(--color-secondary-500);
  --accent-mid:        var(--color-teal-500);

  --gradient-hero:
    radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, #020617 0%, #0F172A 100%);

  --gradient-card:    linear-gradient(180deg, rgba(30, 41, 59, 0.45), rgba(15, 23, 42, 0.45));
  --gradient-button:  linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
  --gradient-text:    linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-secondary-400) 100%);
  --gradient-border:  linear-gradient(135deg, var(--color-primary-500), var(--color-teal-500), var(--color-secondary-500));

  --scrollbar-track: rgba(15, 23, 42, 0.5);
  --scrollbar-thumb: rgba(148, 163, 184, 0.25);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.45);

  --code-bg: #0d1117;
  --code-text: #c9d1d9;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg-primary:     #FAFCFF;
  --bg-secondary:   var(--color-neutral-0);
  --bg-tertiary:    var(--color-neutral-50);
  --bg-card:        var(--color-neutral-0);
  --bg-card-solid:  var(--color-neutral-0);
  --bg-glass:       rgba(255, 255, 255, 0.85);
  --bg-overlay:     rgba(255, 255, 255, 0.85);
  --bg-elevated:    var(--color-neutral-0);

  --text-primary:    var(--color-neutral-900);
  --text-secondary:  #475569;
  --text-tertiary:   var(--color-neutral-500);
  --text-muted:      var(--color-neutral-400);
  --text-inverse:    var(--color-neutral-0);

  --border-color:    rgba(15, 23, 42, 0.08);
  --border-subtle:   rgba(15, 23, 42, 0.04);
  --border-strong:   rgba(15, 23, 42, 0.16);

  --accent-primary:    var(--color-primary-600);
  --accent-secondary:  var(--color-secondary-600);
  --accent-mid:        var(--color-teal-600);

  --gradient-hero:
    radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(16, 185, 129, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #FAFCFF 0%, #F1F8F4 100%);

  --gradient-card:    var(--color-neutral-0);
  --gradient-button:  linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
  --gradient-text:    linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-secondary-700) 100%);
  --gradient-border:  linear-gradient(135deg, var(--color-primary-600), var(--color-teal-600), var(--color-secondary-600));

  --scrollbar-track: var(--color-neutral-100);
  --scrollbar-thumb: rgba(100, 116, 139, 0.35);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.55);

  --code-bg: #f6f8fa;
  --code-text: #24292f;
}

:root {
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme),
    border-color var(--transition-theme);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}