/* ══════════════════════════════════════════════════════════════
   JSIMULADOR — Corporate Design Tokens
   Brand: JSimulador — Simuladores Educativos para Universidades
   Palette: Azul institucional · Dorado académico · Profesional
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary: Azul Institucional ─── */
  --color-primary:            #1d4ed8;
  --color-primary-dark:       #1e3a8a;
  --color-primary-light:      #bfdbfe;
  --color-primary-pale:       #dbeafe;
  --color-primary-wash:       #eff6ff;

  /* ─── Accent: Dorado Académico ─── */
  --color-accent:             #d97706;
  --color-accent-bright:      #fbbf24;
  --color-accent-dark:        #b45309;
  --color-accent-pale:        #fef3c7;
  --color-accent-wash:        #fffbeb;

  /* ─── Secondary: Cian ─── */
  --color-secondary:          #0ea5e9;
  --color-secondary-light:    #38bdf8;
  --color-secondary-pale:     #e0f2fe;
  --color-secondary-wash:     #f0f9ff;

  /* ─── Aliases para compatibilidad con templates existentes ─── */
  --color-terracotta:         var(--color-primary);
  --color-terracotta-deep:    var(--color-primary-dark);
  --color-terracotta-light:   var(--color-primary-light);
  --color-terracotta-pale:    var(--color-primary-pale);
  --color-terracotta-wash:    var(--color-primary-wash);
  --color-gold:               var(--color-accent);
  --color-gold-bright:        var(--color-accent-bright);
  --color-gold-pale:          var(--color-accent-pale);
  --color-gold-wash:          var(--color-accent-wash);
  --color-forest:             #0f172a;
  --color-forest-light:       #1e293b;
  --color-forest-pale:        #e2e8f0;
  --color-forest-wash:        #f8fafc;
  --color-river:              var(--color-secondary);
  --color-river-light:        var(--color-secondary-light);
  --color-river-pale:         var(--color-secondary-pale);
  --color-river-wash:         var(--color-secondary-wash);

  /* ─── Neutrals ─── */
  --color-canvas:            #ffffff;
  --color-surface:           #ffffff;
  --color-surface-alt:       #f8fafc;
  --color-ink:               #0f172a;
  --color-muted:             #64748b;
  --color-border:            #e2e8f0;
  --color-border-light:      #f1f5f9;
  --color-overlay:           rgba(15, 23, 42, 0.5);

  /* ─── Dark Mode Surfaces ─── */
  --color-canvas-dark:       #0f172a;
  --color-surface-dark:      #1e293b;
  --color-surface-alt-dark:  #334155;
  --color-ink-dark:          #f1f5f9;
  --color-muted-dark:        #94a3b8;
  --color-border-dark:       #334155;

  /* ─── Semantic ─── */
  --color-success:           #16a34a;
  --color-success-pale:      #dcfce7;
  --color-error:             #dc2626;
  --color-error-pale:        #fecaca;
  --color-warning:           #d97706;
  --color-warning-pale:      #fef3c7;
  --color-info:              #0ea5e9;
  --color-info-pale:         #e0f2fe;

  /* ─── Career Track Colors ─── */
  --career-contabilidad:     #1d4ed8;
  --career-administracion:   #0ea5e9;
  --career-comercio:         #d97706;
  --career-ingenieria:       #7c3aed;

  /* ─── Gradients ─── */
  --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  --gradient-accent:  linear-gradient(135deg, #b45309 0%, #d97706 100%);
  --gradient-hero:    linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  --gradient-dark:    linear-gradient(180deg, #0c1a3a 0%, #1e3a8a 100%);

  /* ─── Typography ─── */
  --font-display:  'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-hero:       clamp(2.5rem, 5vw + 1rem, 4rem);
  --text-4xl:        3.75rem;
  --text-3xl:        3rem;
  --text-2xl:        2.25rem;
  --text-xl:         1.875rem;
  --text-lg:         1.25rem;
  --text-md:         1.125rem;
  --text-base:       1rem;
  --text-sm:         0.875rem;
  --text-xs:         0.75rem;

  /* ─── Radii ─── */
  --radius-none:     0;
  --radius-sharp:    2px;
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-full:     9999px;

  /* ─── Shadows ─── */
  --shadow-subtle:   0 1px 2px rgba(15,23,42,0.04);
  --shadow-card:     0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-elevated: 0 10px 40px rgba(15,23,42,0.10);
  --shadow-glow:     0 0 24px rgba(29,78,216,0.2);

  /* ─── Transitions ─── */
  --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-reveal: 600ms;

  /* ─── Layout ─── */
  --topbar-height:   56px;
  --sidebar-collapsed: 64px;
  --sidebar-expanded:  240px;

  /* ─── Z-index ─── */
  --z-sidebar:       50;
  --z-topbar:        100;
  --z-dropdown:      200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-toast:         500;

  /* ─── Spacing Scale (4px baseline) ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 10rem;
}

/* ─── Dark Mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --color-canvas:         var(--color-canvas-dark);
  --color-surface:        var(--color-surface-dark);
  --color-surface-alt:    var(--color-surface-alt-dark);
  --color-ink:            var(--color-ink-dark);
  --color-muted:          var(--color-muted-dark);
  --color-border:         var(--color-border-dark);
  --color-border-light:   var(--color-border-dark);
  --color-primary:        #3b82f6;
  --color-primary-dark:   #1e3a8a;
  --color-accent:         #f59e0b;
  --color-accent-bright:  #fbbf24;
  --shadow-subtle:        0 1px 2px rgba(0,0,0,0.2);
  --shadow-card:          0 1px 3px rgba(0,0,0,0.3);
  --shadow-elevated:      0 10px 40px rgba(0,0,0,0.4);
  --shadow-glow:          0 0 24px rgba(59,130,246,0.15);
}