/* =========================================================
   theme.css — Fuente de verdad del sistema de diseño
   Universidad del Tolima — Sistema de Semilleros IDEAD
   Extraído de login.php (referencia light-first)
   ========================================================= */

/* ─── LIGHT MODE (default) ──────────────────────────── */

:root {

  /* Superficies */
  --color-bg:         #f8fafc;
  --color-surface:    #ffffff;
  --color-surface-2:  #f1f5f9;
  --color-surface-3:  #e2e8f0;

  /* Texto */
  --color-text:       #111827;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;
  --color-text-invert:#ffffff;

  /* Bordes */
  --color-border:       #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-muted: #f3f4f6;

  /* Primario — Rojo UT */
  --color-primary:       #ef4444;
  --color-primary-hover: #dc2626;
  --color-primary-dark:  #b91c1c;
  --color-primary-light: #fee2e2;
  --color-primary-text:  #991b1b;

  /* Acento — Naranja UT */
  --color-accent:        #f97316;
  --color-accent-hover:  #ea580c;

  /* Gradiente rojo→naranja (botón primario, igual que login.php) */
  --color-gradient:      linear-gradient(135deg, #ef4444, #f97316);
  --color-gradient-hover:linear-gradient(135deg, #dc2626, #ea580c);

  /* Gradiente decorativo barra (login.php: from-blue-400 to-green-400) */
  --gradient-accent: linear-gradient(to right, #60a5fa, #34d399);

  /* Semánticos */
  --color-success:        #10b981;
  --color-success-light:  #d1fae5;
  --color-success-border: #6ee7b7;
  --color-success-text:   #065f46;

  --color-warning:        #f59e0b;
  --color-warning-light:  #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text:   #92400e;

  --color-error:          #ef4444;
  --color-error-light:    #fef2f2;
  --color-error-border:   #fecaca;
  --color-error-text:     #b91c1c;

  --color-info:           #3b82f6;
  --color-info-light:     #eff6ff;
  --color-info-border:    #bfdbfe;

  /* Navegación — siempre oscura para contraste */
  --color-nav:             #111827;
  --color-nav-border:      #1f2937;
  --color-sidebar:         #1f2937;
  --color-sidebar-hover:   rgba(239,68,68,0.12);
  --color-sidebar-active:  rgba(239,68,68,0.20);
  --color-sidebar-text:    rgba(255,255,255,0.80);
  --color-sidebar-text-active: #fca5a5;

  /* Sombras */
  --shadow-card: 0 25px 50px -12px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.8);
  --shadow-md:   0 4px  12px rgba(0,0,0,0.08);
  --shadow-sm:   0 1px   3px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px  25px rgba(0,0,0,0.12);
  --shadow-xl:   0 20px  40px rgba(0,0,0,0.15);
  --shadow-btn:  0 4px   12px rgba(239,68,68,0.30);

  /* Focus ring — rojo (focus:ring-red-500 en login.php) */
  --focus-ring:  0 0 0 3px rgba(239,68,68,0.35);

  /* Fondo con patrón (bg-pattern en login.php) */
  --bg-pattern:
    radial-gradient(circle at 25px 25px, rgba(59,130,246,0.10) 2px, transparent 0),
    radial-gradient(circle at 75px 75px, rgba(16,185,129,0.10) 2px, transparent 0);
  --bg-pattern-size: 100px 100px;

  /* Radii (extraídos de login.php) */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-card:  1rem;    /* rounded-2xl */
  --radius-btn:   0.5rem;  /* rounded-lg */
  --radius-input: 0.5rem;  /* rounded-lg */
  --radius-full:  9999px;

  /* Alias legibles */
  --radius-lg:  var(--radius-card);
  --radius-xl:  1.25rem;

  /* Tipografía */
  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:        clamp(11px, 1.1vw, 12px);
  --text-sm:        clamp(13px, 1.3vw, 14px);
  --text-base:      clamp(15px, 1.5vw, 16px);
  --text-lg:        clamp(17px, 1.7vw, 18px);
  --text-xl:        clamp(19px, 1.9vw, 20px);
  --text-2xl:       clamp(22px, 2.2vw, 24px);
  --text-3xl:       clamp(26px, 2.8vw, 30px);
  --text-4xl:       clamp(32px, 3.5vw, 40px);
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Espaciado 4px */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-7: 28px;  --space-8: 32px;  --space-10:40px;
  --space-12:48px;  --space-16:64px;  --space-20:80px;
  --space-24:96px;

  /* Transiciones */
  --transition:      0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-theme:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


/* ─── DARK MODE ──────────────────────────────────────── */

[data-theme="dark"] {

  --color-bg:         #0f172a;
  --color-surface:    #1e293b;
  --color-surface-2:  #334155;
  --color-surface-3:  #475569;

  --color-text:       #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;

  --color-border:       #334155;
  --color-border-light: #475569;
  --color-border-muted: #1e293b;

  /* Primario más suave en dark — rojo más brillante */
  --color-primary:       #f87171;
  --color-primary-hover: #ef4444;
  --color-primary-dark:  #dc2626;
  --color-primary-light: #450a0a;
  --color-primary-text:  #fca5a5;

  --color-accent:        #fb923c;
  --color-accent-hover:  #f97316;

  --color-gradient:      linear-gradient(135deg, #f87171, #fb923c);
  --color-gradient-hover:linear-gradient(135deg, #ef4444, #f97316);

  --color-success:        #34d399;
  --color-success-light:  #022c22;
  --color-success-border: #065f46;
  --color-success-text:   #6ee7b7;

  --color-warning:        #fbbf24;
  --color-warning-light:  #292011;
  --color-warning-border: #78350f;
  --color-warning-text:   #fde68a;

  --color-error:          #f87171;
  --color-error-light:    #2c0a0a;
  --color-error-border:   #7f1d1d;
  --color-error-text:     #fca5a5;

  --color-info:           #60a5fa;
  --color-info-light:     #0c1a3b;
  --color-info-border:    #1e3a8a;

  /* Sombras más profundas en dark */
  --shadow-card: 0 25px 50px -12px rgba(0,0,0,0.50);
  --shadow-md:   0 4px  12px rgba(0,0,0,0.30);
  --shadow-sm:   0 1px   3px rgba(0,0,0,0.20);
  --shadow-lg:   0 10px  25px rgba(0,0,0,0.40);
  --shadow-xl:   0 20px  40px rgba(0,0,0,0.50);
  --shadow-btn:  0 4px   12px rgba(248,113,113,0.30);

  --focus-ring:  0 0 0 3px rgba(248,113,113,0.40);

  --bg-pattern:
    radial-gradient(circle at 25px 25px, rgba(248,113,113,0.06) 2px, transparent 0),
    radial-gradient(circle at 75px 75px, rgba(52,211,153,0.06) 2px, transparent 0);
}