/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Plataforma Educativa Universitaria
   Sistema de diseño centralizado.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────── */
  --bg-primary:       #f7f9fc; /* Subtle navy tint */
  --bg-secondary:     #ffffff; 
  --bg-surface:       #ffffff;
  --bg-surface-hover: #f1f5fa; /* Subtle navy tint */
  --bg-surface-active:#e2e8f0; 
  --bg-elevated:      #ffffff;

  /* ── Borders ─────────────────────────────────── */
  --border-default:   rgba(15, 59, 115, 0.12); /* Navy tint */
  --border-light:     rgba(15, 59, 115, 0.08); /* Navy tint */
  --border-medium:    rgba(194, 148, 42, 0.40); /* Gold tint */
  --border-focus:     rgba(15, 59, 115, 0.50); /* Navy tint */

  /* ── Text ────────────────────────────────────── */
  --text-primary:     #111c2c; /* on-surface */
  --text-secondary:   #43474e; /* on-surface-variant */
  --text-muted:       #74777f; /* outline */
  --text-inverse:     #ffffff; /* on-primary */

  /* ── Accent Colors ──────────────────────────── */
  --accent-blue:      #0f3b73; /* Rich navy */
  --accent-blue-hover:#1e4c8c; 
  --accent-cyan:      #0ea5e9; /* Sky blue */
  --accent-purple:    #8b5cf6; /* Vibrant purple */
  --accent-pink:      #ec4899; 
  --accent-green:     #10b981; /* Emerald */
  --accent-teal:      #14b8a6; 
  --accent-amber:     #d97706; /* Amber */
  --accent-gold:      #c2942a; /* Celsus gold */
  --accent-red:       #ef4444; /* Bright red */
  --accent-red-hover: #dc2626; 
  --accent-orange:    #f97316; 
  --accent-primary:   var(--accent-blue);
  --accent-emerald:   var(--accent-green);
  /* ── Status Colors ──────────────────────────── */
  --status-aprobada:    var(--accent-green);
  --status-cursando:    var(--accent-blue);
  --status-disponible:  var(--accent-gold);
  --status-bloqueada:   var(--border-medium);
  --status-reprobada:   var(--accent-red);

  /* ── Gradients ──────────────────────────────── */
  --gradient-blue:    linear-gradient(135deg, #0a2540, #0f3b73);
  --gradient-purple:  linear-gradient(135deg, #6d28d9, #8b5cf6);
  --gradient-green:   linear-gradient(135deg, #047857, #10b981);
  --gradient-amber:   linear-gradient(135deg, #b45309, #f59e0b);
  --gradient-gold:    linear-gradient(135deg, #996b12, #c2942a);
  --gradient-red:     linear-gradient(135deg, #b91c1c, #ef4444);
  --gradient-pink:    linear-gradient(135deg, #be185d, #ec4899);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);

  /* ── Glassmorphism ──────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.75);
  --glass-bg-light:   rgba(255, 255, 255, 0.50);
  --glass-blur:       blur(24px);
  --glass-border:     1px solid rgba(255, 255, 255, 0.6);

  /* ── Background Patterns ────────────────────── */
  --body-bg-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(240, 244, 248, 0.55) 50%, rgba(255, 255, 255, 0.50) 100%), url("/static/assets/login_bg_light.png");
  --student-bg-gradient: linear-gradient(rgba(247, 249, 252, 0.72), rgba(247, 249, 252, 0.88)), url("/static/assets/login_bg_light.png");
  --docente-bg-gradient: linear-gradient(rgba(247, 249, 252, 0.75), rgba(247, 249, 252, 0.90)), url("/static/assets/login_bg_light.png");
  --admin-bg-gradient: linear-gradient(rgba(247, 249, 252, 0.72), rgba(247, 249, 252, 0.88)), url("/static/assets/instalacion.jpg");

  /* ── Shadows ────────────────────────────────── */
  --shadow-xs:        0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-sm:        0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-md:        0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 6px 12px -2px rgba(0, 0, 0, 0.04); 
  --shadow-lg:        0 24px 32px -8px rgba(0, 0, 0, 0.10), 0 12px 16px -4px rgba(0, 0, 0, 0.06); 
  --shadow-xl:        0 32px 64px -12px rgba(0, 0, 0, 0.14);
  --shadow-glow-blue:   0 12px 30px -4px rgba(15, 59, 115, 0.4);
  --shadow-glow-purple: 0 12px 30px -4px rgba(139, 92, 246, 0.4);
  --shadow-glow-green:  0 12px 30px -4px rgba(16, 185, 129, 0.4);
  --shadow-glow-amber:  0 12px 30px -4px rgba(217, 119, 6, 0.4);
  --shadow-glow-gold:   0 12px 30px -4px rgba(194, 148, 42, 0.4);
  --shadow-glow-red:    0 12px 30px -4px rgba(239, 68, 68, 0.4);

  /* ── Typography ─────────────────────────────── */
  --font-family:      'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;
  --font-size-2xs:    0.6875rem;  /* 11px */
  --font-size-xs:     0.75rem;    /* 12px */
  --font-size-sm:     0.8125rem;  /* 13px */
  --font-size-base:   0.875rem;   /* 14px */
  --font-size-lg:     1rem;       /* 16px */
  --font-size-xl:     1.125rem;   /* 18px */
  --font-size-2xl:    1.5rem;     /* 24px */
  --font-size-3xl:    1.875rem;   /* 30px */
  --font-size-4xl:    2.25rem;    /* 36px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:   700;
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.625;
  --letter-spacing-tight: -0.025em;

  /* ── Spacing ────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Border Radius ──────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ── Transitions ────────────────────────────── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:  150ms var(--ease-out);
  --transition-base:  250ms var(--ease-out);
  --transition-slow:  400ms var(--ease-out);

  /* ── Layout ─────────────────────────────────── */
  --sidebar-width:     260px;
  --sidebar-collapsed: 68px;
  --topbar-height:     0px;
  --content-padding:   var(--space-8);
  --content-max:       1440px;

  /* ── Z-Index ────────────────────────────────── */
  --z-sidebar:   100;
  --z-topbar:    110;
  --z-dropdown:  200;
  --z-modal:     300;
  --z-toast:     400;
  --z-tooltip:   500;

  /* ── Background Pattern & Watermark ────────── */
  --pattern-color:     rgba(0, 0, 0, 0.03);
  --watermark-opacity: 0.025;
  --scrollbar-thumb:   rgba(0, 0, 0, 0.15);
  --scrollbar-hover:   rgba(0, 0, 0, 0.25);
}

/* ── Dark Mode (Automático o por clase) ──────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-primary:       #0a192f;
    --bg-secondary:     #0d1f3c;
    --bg-surface:       #112240;
    --bg-surface-hover: #1a3050;
    --bg-surface-active:#233a5c;
    --bg-elevated:      #0f1d35;

    --border-default:   rgba(255, 215, 0, 0.12);
    --border-light:     rgba(255, 255, 255, 0.08);
    --border-medium:    rgba(255, 215, 0, 0.25);
    --border-focus:     rgba(255, 215, 0, 0.50);

    --text-primary:     #e6f1ff;
    --text-secondary:   #8892b0;
    --text-muted:       #5a6a8a;
    --text-inverse:     #020c1b;

    --accent-blue:      #ffd700;
    --accent-blue-hover:#ffeb82;
    --accent-cyan:      #64ffda;
    --accent-green:     #64ffda;
    --accent-amber:     #ffd700;
    --accent-gold:      #ffd700;
    --accent-red:       #ff6b6b;
    --accent-red-hover: #ff4444;
    --accent-purple:    #c792ea;
    --accent-orange:    #ffb347;

    --gradient-blue:    linear-gradient(135deg, #b8860b, #ffd700);
    --gradient-purple:  linear-gradient(135deg, #7c3aed, #c792ea);
    --gradient-green:   linear-gradient(135deg, #0d7a5f, #64ffda);
    --gradient-amber:   linear-gradient(135deg, #b8860b, #ffd700);
    --gradient-gold:    linear-gradient(135deg, #b8860b, #ffd700);
    --gradient-red:     linear-gradient(135deg, #cc3333, #ff6b6b);
    --gradient-surface: linear-gradient(180deg, rgba(17, 34, 64, 0.7) 0%, rgba(10, 25, 47, 0) 100%);

    --glass-bg:         rgba(10, 25, 47, 0.85);
    --glass-bg-light:   rgba(13, 31, 60, 0.60);
    --glass-border:     1px solid rgba(255, 215, 0, 0.08);

    --body-bg-gradient: linear-gradient(135deg, rgba(10, 25, 47, 0.70) 0%, rgba(17, 34, 64, 0.65) 100%), url("/static/assets/instalaciones2.jpg");
    --student-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.55), rgba(10, 25, 47, 0.78)), url("/static/assets/banner1.jpg");
    --docente-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.58), rgba(10, 25, 47, 0.80)), url("/static/assets/banner1.jpg");
    --admin-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.65), rgba(10, 25, 47, 0.85)), url("/static/assets/instalaciones2.jpg");

    --shadow-xs:        0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-sm:        0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-md:        0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 6px 12px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 24px 32px -8px rgba(0, 0, 0, 0.6), 0 12px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl:        0 32px 64px -12px rgba(0, 0, 0, 0.8);
    --shadow-glow-blue:   0 12px 30px -4px rgba(255, 215, 0, 0.25);
    --shadow-glow-purple: 0 12px 30px -4px rgba(199, 146, 234, 0.3);
    --shadow-glow-green:  0 12px 30px -4px rgba(100, 255, 218, 0.25);
    --shadow-glow-amber:  0 12px 30px -4px rgba(255, 215, 0, 0.25);
    --shadow-glow-gold:   0 12px 30px -4px rgba(255, 215, 0, 0.3);
    --shadow-glow-red:    0 12px 30px -4px rgba(255, 107, 107, 0.3);

    --pattern-color:     rgba(255, 215, 0, 0.02);
    --watermark-opacity: 0;
    --scrollbar-thumb:   rgba(255, 215, 0, 0.15);
    --scrollbar-hover:   rgba(255, 215, 0, 0.30);
  }
}

:root.dark {
  /* ── Celsus Dark: Navy + Gold Premium Theme ──────────── */

  /* Backgrounds — deep navy palette */
  --bg-primary:       #0a192f;
  --bg-secondary:     #0d1f3c;
  --bg-surface:       #112240;
  --bg-surface-hover: #1a3050;
  --bg-surface-active:#233a5c;
  --bg-elevated:      #0f1d35;

  /* Borders — subtle navy tints */
  --border-default:   rgba(255, 215, 0, 0.12);
  --border-light:     rgba(255, 255, 255, 0.08);
  --border-medium:    rgba(255, 215, 0, 0.25);
  --border-focus:     rgba(255, 215, 0, 0.50);

  /* Text — high contrast on navy */
  --text-primary:     #e6f1ff;
  --text-secondary:   #8892b0;
  --text-muted:       #5a6a8a;
  --text-inverse:     #020c1b;

  /* Accent — gold as primary accent */
  --accent-blue:      #ffd700;
  --accent-blue-hover:#ffeb82;
  --accent-cyan:      #64ffda;     /* teal mint for secondary highlights */
  --accent-green:     #64ffda;
  --accent-amber:     #ffd700;
  --accent-gold:      #ffd700;
  --accent-red:       #ff6b6b;
  --accent-red-hover: #ff4444;
  --accent-purple:    #c792ea;
  --accent-orange:    #ffb347;

  /* Gradients — navy-to-gold */
  --gradient-blue:    linear-gradient(135deg, #b8860b, #ffd700);
  --gradient-purple:  linear-gradient(135deg, #7c3aed, #c792ea);
  --gradient-green:   linear-gradient(135deg, #0d7a5f, #64ffda);
  --gradient-amber:   linear-gradient(135deg, #b8860b, #ffd700);
  --gradient-gold:    linear-gradient(135deg, #b8860b, #ffd700);
  --gradient-red:     linear-gradient(135deg, #cc3333, #ff6b6b);
  --gradient-surface: linear-gradient(180deg, rgba(17, 34, 64, 0.7) 0%, rgba(10, 25, 47, 0) 100%);

  /* Glassmorphism — dark navy glass */
  --glass-bg:         rgba(10, 25, 47, 0.85);
  --glass-bg-light:   rgba(13, 31, 60, 0.60);
  --glass-border:     1px solid rgba(255, 215, 0, 0.08);

  /* Body background */
  --body-bg-gradient: linear-gradient(135deg, rgba(10, 25, 47, 0.70) 0%, rgba(17, 34, 64, 0.65) 100%), url("/static/assets/instalaciones2.jpg");
  --student-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.55), rgba(10, 25, 47, 0.78)), url("/static/assets/banner1.jpg");
  --docente-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.58), rgba(10, 25, 47, 0.80)), url("/static/assets/banner1.jpg");
  --admin-bg-gradient: linear-gradient(rgba(10, 25, 47, 0.65), rgba(10, 25, 47, 0.85)), url("/static/assets/instalaciones2.jpg");

  /* Shadows — deep navy shadows with gold glow */
  --shadow-xs:        0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-sm:        0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 6px 12px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 24px 32px -8px rgba(0, 0, 0, 0.6), 0 12px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:        0 32px 64px -12px rgba(0, 0, 0, 0.8);
  --shadow-glow-blue:   0 12px 30px -4px rgba(255, 215, 0, 0.25);
  --shadow-glow-purple: 0 12px 30px -4px rgba(199, 146, 234, 0.3);
  --shadow-glow-green:  0 12px 30px -4px rgba(100, 255, 218, 0.25);
  --shadow-glow-amber:  0 12px 30px -4px rgba(255, 215, 0, 0.25);
  --shadow-glow-gold:   0 12px 30px -4px rgba(255, 215, 0, 0.3);
  --shadow-glow-red:    0 12px 30px -4px rgba(255, 107, 107, 0.3);

  /* Misc */
  --pattern-color:     rgba(255, 215, 0, 0.02);
  --watermark-opacity: 0;
  --scrollbar-thumb:   rgba(255, 215, 0, 0.15);
  --scrollbar-hover:   rgba(255, 215, 0, 0.30);
}