/* ================================================================
   Yziel Plataforma Académica — Design Tokens
   Paleta: Slate Minimalista
   Estrategia: tokens CSS primero, componentes después, páginas al final
   ================================================================ */

:root {
  /* ── ESCALA SLATE (dominante) ─────────────────────────────── */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ── ACENTO AZUL (uso restringido) ──────────────────────────── */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  /* ── SEMÁNTICOS ─────────────────────────────────────────────── */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --danger-50:   #fef2f2;
  --danger-100:  #fee2e2;
  --danger-500:  #ef4444;
  --danger-600:  #dc2626;
  --danger-700:  #b91c1c;
  --info-50:     #f0f9ff;
  --info-500:    #0ea5e9;
  --info-700:    #0369a1;

  /* ── ROLES SEMÁNTICOS (lo que usan los componentes) ─────────── */
  --color-bg:            var(--slate-50);
  --color-surface:       #ffffff;
  --color-surface-alt:   var(--slate-100);
  --color-surface-hover: var(--slate-100);
  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-text:          var(--slate-900);
  --color-text-muted:    var(--slate-500);
  --color-text-subtle:   var(--slate-400);
  --color-accent:        var(--blue-600);
  --color-accent-hover:  var(--blue-700);
  --color-accent-soft:   var(--blue-50);
  --color-focus-ring:    var(--blue-500);

  /* Navegación (sidebar claro) */
  --color-nav-bg:        #ffffff;
  --color-nav-text:      var(--slate-800);
  --color-nav-muted:     var(--slate-500);
  --color-nav-active-bg: var(--blue-50);
  --color-nav-active:    var(--blue-700);
  --color-nav-hover:     var(--slate-100);
  --color-nav-border:    var(--slate-200);
  --color-nav-watermark: var(--slate-200);

  /* Topbar */
  --color-topbar-bg:     var(--color-surface);
  --color-topbar-border: var(--color-border);

  /* ── TIPOGRAFÍA ──────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── ESPACIADO (escala 4 px) ─────────────────────────────────── */
  --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;

  /* ── BORDES Y RADIOS ─────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;
  --border-width: 1px;

  /* ── ELEVACIÓN ───────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04);

  /* ── MOVIMIENTO ──────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── COLOR SCHEME: siempre claro (no auto dark mode) ────────── */
:root { color-scheme: light; }

/* ── ACCESIBILIDAD — prefers-reduced-motion ─────────────────── */
@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;
  }
}