/* ============================================
   NIM-ACh Design System — Variables
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --c-navy:        #060e1e;
  --c-navy-2:      #0d1d35;
  --c-navy-3:      #142440;
  --c-blue:        #3b7abf;
  --c-blue-light:  #7fb3e8;
  --c-coral:       #e87040;
  --c-coral-light: #f5a472;
  --c-teal:        #1db884;
  --c-purple:      #7b52d4;

  /* ── Text ── */
  --t-hero:        #e8f0fa;
  --t-muted:       #7a9bbf;
  --t-dim:         #3a5570;

  /* ── Glass surfaces ── */
  --glass:         rgba(255, 255, 255, 0.04);
  --glass-hover:   rgba(255, 255, 255, 0.08);
  --glass-border:  rgba(255, 255, 255, 0.09);

  /* ── Gradients ── */
  --grad-brand:    linear-gradient(135deg, var(--c-blue), var(--c-coral));
  --grad-hero:     linear-gradient(105deg, rgba(6,14,30,.97) 0%, rgba(6,14,30,.72) 55%, rgba(6,14,30,.08) 100%);
  --grad-accent:   linear-gradient(90deg, var(--c-coral), var(--c-coral-light), var(--c-blue-light));

  /* ── Spacing ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 64px;

  /* ── Radius ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-mid:     320ms;
  --dur-slow:    600ms;

  /* ── Shadows ── */
  --shadow-blue:  0 8px 28px rgba(59, 122, 191, 0.35);
  --shadow-coral: 0 8px 28px rgba(232, 112, 64, 0.38);
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.08);

  /* ── Typography ── */
  --font-sans: 'Sora', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Z-index scale ── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Light-mode overrides (sections on white bg) ── */
.light-section {
  --s-bg:       #ffffff;
  --s-bg-2:     #f6f8fc;
  --s-border:   rgba(0, 0, 0, 0.07);
  --s-text:     #0d1d35;
  --s-text-2:   #4a6280;
  --s-text-3:   #8aa0b8;
}

.dark-section {
  --s-bg:       var(--c-navy);
  --s-bg-2:     var(--c-navy-2);
  --s-border:   var(--glass-border);
  --s-text:     var(--t-hero);
  --s-text-2:   var(--t-muted);
  --s-text-3:   var(--t-dim);
}

/* ══════════════════════════════════
   DARK MODE — body.dark-mode overrides
   Activa el modo oscuro global sobre
   las light-sections y componentes blancos.
══════════════════════════════════ */

/* Transición suave al cambiar tema */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition:
    background-color .32s var(--ease-out),
    border-color     .32s var(--ease-out),
    color            .32s var(--ease-out),
    box-shadow       .32s var(--ease-out) !important;
}

body.dark-mode {
  background: var(--c-navy-2);
  color: var(--t-hero);
}

/* Secciones con fondo inline (override !important necesario) */
body.dark-mode #investigacion  { background: var(--c-navy-2)  !important; }
body.dark-mode #proyectos      { background: var(--c-navy-3)  !important; }
body.dark-mode #personas       { background: var(--c-navy-2)  !important; }
body.dark-mode #publicaciones  { background: var(--c-navy-3)  !important; }
body.dark-mode #herramientas   { background: var(--c-navy-2)  !important; }
body.dark-mode #metricas       { background: var(--c-navy-3)  !important; }
body.dark-mode #galeria        { background: var(--c-navy-2)  !important; }
body.dark-mode #contacto       { background: var(--c-navy-2)  !important; }

/* Variables semánticas en modo oscuro */
body.dark-mode .light-section {
  --s-bg:     var(--c-navy-2);
  --s-bg-2:   var(--c-navy-3);
  --s-border: var(--glass-border);
  --s-text:   var(--t-hero);
  --s-text-2: var(--t-muted);
  --s-text-3: var(--t-dim);
}

/* Cards */
body.dark-mode .research-card,
body.dark-mode .person-card,
body.dark-mode .project-card,
body.dark-mode .pub-card,
body.dark-mode .tool-card,
body.dark-mode .dataset-card,
body.dark-mode .metric-card {
  background:    var(--c-navy-3);
  border-color:  var(--glass-border);
}

body.dark-mode .card-title,
body.dark-mode .person-name,
body.dark-mode .project-title,
body.dark-mode .pub-title,
body.dark-mode .section-title,
body.dark-mode .meta-value {
  color: var(--t-hero);
}

body.dark-mode .card-desc,
body.dark-mode .person-role,
body.dark-mode .project-pi,
body.dark-mode .pub-authors,
body.dark-mode .section-desc {
  color: var(--t-muted);
}

body.dark-mode .tag,
body.dark-mode .person-chip,
body.dark-mode .collab-chip,
body.dark-mode .timeline-tag,
body.dark-mode .footer-chip {
  background: rgba(255,255,255,.07);
  color: var(--t-muted);
}

/* Inputs */
body.dark-mode .form-input {
  background:   var(--c-navy-3);
  border-color: var(--glass-border);
  color:        var(--t-hero);
}

body.dark-mode .form-input::placeholder { color: var(--t-dim); }
body.dark-mode .form-input:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(59,122,191,.15);
}

/* Timeline */
body.dark-mode .timeline::before { background: rgba(255,255,255,.08); }
body.dark-mode .timeline-dot     { background: var(--c-navy-3); }
body.dark-mode .timeline-text,
body.dark-mode .timeline-date    { color: var(--t-muted); }

/* Progress tracks */
body.dark-mode .progress-track { background: rgba(255,255,255,.07); }

/* Contact info */
body.dark-mode .contact-icon    { background: var(--c-navy-3); }
body.dark-mode .contact-value   { color: var(--t-hero); }
body.dark-mode .contact-label   { color: var(--t-dim); }

/* Social buttons */
body.dark-mode .social-btn {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
}
body.dark-mode .social-btn:hover {
  background: rgba(255,255,255,.12);
  color: var(--t-hero);
}

/* Sección títulos y descripciones en light-sections */
body.dark-mode .section-title      { color: var(--t-hero); }
body.dark-mode .section-desc       { color: var(--t-muted); }

/* Timeline */
body.dark-mode .timeline-tag {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
}
body.dark-mode .timeline-date { color: var(--t-dim); }
body.dark-mode .timeline-text { color: var(--t-muted); }
body.dark-mode .timeline-text a { color: var(--c-coral); }

/* Collab chips & contact */
body.dark-mode .collab-chip {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
  border-color: var(--glass-border);
}

/* Publications */
body.dark-mode .pub-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .pub-title   { color: var(--t-hero); }
body.dark-mode .pub-authors { color: var(--t-muted); }

/* Tools */
body.dark-mode .tool-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .tool-title  { color: var(--t-hero); }
body.dark-mode .tool-desc   { color: var(--t-muted); }
body.dark-mode .tool-feature{ color: var(--t-muted); }
body.dark-mode .tool-author { color: var(--t-dim); border-top-color: var(--glass-border); }
body.dark-mode .tool-btn-ghost {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
  border-color: var(--glass-border);
}

/* Projects */
body.dark-mode .project-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .project-title   { color: var(--t-hero); }
body.dark-mode .project-pi      { color: var(--t-muted); }
body.dark-mode .meta-label      { color: var(--t-dim); }
body.dark-mode .meta-value      { color: var(--t-hero); }
body.dark-mode .progress-header { color: var(--t-muted); }
body.dark-mode .project-tags .tag {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
}

/* Research cards */
body.dark-mode .research-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .card-title   { color: var(--t-hero); }
body.dark-mode .card-desc    { color: var(--t-muted); }
body.dark-mode .research-card .tag {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
}

/* Person cards */
body.dark-mode .person-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .person-name  { color: var(--t-hero); }
body.dark-mode .person-role  { color: var(--t-muted); }
body.dark-mode .person-chip {
  background: rgba(255,255,255,.06);
  color: var(--t-muted);
}

/* Metrics */
body.dark-mode .metric-card {
  background: var(--c-navy-3);
  border-color: var(--glass-border);
}
body.dark-mode .metric-value  { color: var(--t-hero); }
body.dark-mode .metric-label  { color: var(--t-muted); }
body.dark-mode .metric-source { color: var(--t-dim); }

/* Contact section title */
body.dark-mode #contacto .section-title { color: var(--t-hero); }

/* Footer (ya es dark, pero por si acaso) */
body.dark-mode .footer-copy { color: var(--t-dim); }

/* See-all links */
body.dark-mode .see-all:hover { color: var(--t-hero); }

/* Section headers separators */
body.dark-mode .section-header { border-color: var(--glass-border); }

/* Pub list loading */
body.dark-mode .pub-list-loading { color: var(--t-dim); }

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-track { background: var(--c-navy); }