/* ============================================================================
   ABAKU · Sistema de diseño unificado
   ----------------------------------------------------------------------------
   Capa ÚNICA de:
     1) Tokens semánticos --abk-* (colores, tipografía, espaciado, radios)
     2) Componentes globales reutilizables .abk-* (h1..h4, card, modal, btn,
        form, table, badge, pay-*)

   Carga ANTES que dashboard.css y antes que cualquier CSS de módulo.
   Documentación de la convención: ./CSS_CONVENTIONS.md

   Reglas de uso:
     - Modules ESTILIZAN sólo .{ns}-* (su namespace) y APLICAN clases .abk-*
     - Modules USAN var(--abk-*); nunca hardcodean colores
     - Prohibido estilizar body, html, h1..h6, table, input, button sin
       namespace o sin clase .abk-*
   ============================================================================ */

/* ============================================================================
   1) TOKENS — light (default)
   ----------------------------------------------------------------------------
   Identidad ABAKU v1: VIOLETA PROFUNDO + CYAN ACENTO (matching abaku.mx)
   - Primary  → violet-500 (#8b5cf6) — la identidad principal de la marca
   - Primary-2→ violet-700 (#6d28d9) — hover, deep, gradient stops
   - Primary-3→ purple-500 (#a855f7) — variante saturada
   - Accent   → cyan-400 (#22d3ee) — el "wow" que diferencia de morados genéricos
   - Shell    → deep purple-black (#0d0820 / #15102e)
   - Gradient text → violet → pink → amber (multi-color for headings)
   ============================================================================ */
:root {
  /* ─── MARCA / PRIMARIO (violet) ─── */
  --abk-primary:           #8b5cf6;             /* violet-500 */
  --abk-primary-2:         #6d28d9;             /* violet-700 (hover) */
  --abk-primary-3:         #a855f7;             /* purple-500 (variante saturada) */
  --abk-primary-deep:      #4c1d95;             /* violet-900 (pressed/deep — no usar primary-2) */
  --abk-primary-soft:      #c4b5fd;             /* violet-300 (text on dark, soft hl) */
  --abk-primary-ink:       #ffffff;             /* texto sobre superficie primary */
  --abk-on-primary:        #ffffff;
  --abk-primary-glow:      rgba(139,92,246,.35);
  /* Tinte base para hover/selected/card bg. Detectado como patrón
     repetido en 9 módulos. Usar directo, no reescribir el color-mix. */
  --abk-bg-tint-primary:   color-mix(in oklch, var(--abk-primary-3) 8%, transparent);

  /* ─── ACENTO (cyan — segundo canal cromático, el wow factor) ─── */
  --abk-accent:            #22d3ee;             /* cyan-400 */
  --abk-accent-2:          #06b6d4;             /* cyan-500 */
  --abk-accent-soft:       #67e8f9;             /* cyan-300 */
  --abk-accent-glow:       rgba(34,211,238,.30);

  /* ─── GRADIENTES (matching abaku.mx) ─── */
  --abk-grad-primary:      linear-gradient(135deg, #a855f7 0%, #6d28d9 60%, #4338ca 100%);
  --abk-grad-text:         linear-gradient(120deg, #c4b5fd 0%, #f472b6 50%, #fde68a 100%);
  --abk-grad-hero:         radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.20), transparent 60%),
                           radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.10), transparent 60%);

  /* ─── SUPERFICIES — light de verdad (blanco predominante) ─── */
  --abk-bg:                #ffffff;             /* contenido principal */
  --abk-bg-2:              #fafaff;             /* alterno — violet-50 muy sutil */
  --abk-bg-shell:          #fcfcfd;             /* shell LIGHT — casi blanco */
  --abk-surface:           #ffffff;             /* card, modal */
  --abk-surface-2:         #f5f3ff;             /* card alterno — violet-50 */
  --abk-surface-overlay:   rgba(15,23,42,.45);  /* overlay de modal — slate alpha */
  --abk-glass-bg:          rgba(255,255,255,.75); /* glassmorphism light */
  --abk-glass-border:      rgba(139,92,246,.18);  /* borde violet sutil */

  /* ─── TEXTO ─── */
  --abk-text:              #0f172a;             /* slate-900 */
  --abk-text-soft:         #475569;             /* slate-600 */
  --abk-text-muted:        #64748b;             /* slate-500 */
  --abk-text-on-primary:   #ffffff;
  --abk-text-on-shell:     #1e293b;             /* texto OSCURO sobre shell blanco */
  --abk-text-heading:      #1e1b4b;             /* indigo-950 — tono profundo para títulos */
  --abk-text-heading-soft: #312e81;             /* indigo-800 */
  --abk-text-link:         #4338ca;             /* indigo-700 — links inline */

  /* ─── BORDES (3 niveles + control) ─── */
  --abk-border-soft:       #f3f0ff;             /* separadores — violet-100 */
  --abk-border-section:    #ddd6fe;             /* cards y secciones — violet-200 */
  --abk-border-strong:     #c4b5fd;             /* panels principales — fuchsia-300 */
  --abk-border-width:      1px;
  --abk-border-radius:     12px;

  /* ─── FEEDBACK / ESTADO ─── */
  --abk-ok:                #10b981;             /* emerald-500 */
  --abk-ok-strong:         #047857;             /* emerald-700 */
  --abk-ok-bg:             #d1fae5;
  --abk-ok-glow:           rgba(16,185,129,.30);
  --abk-warn:              #f59e0b;             /* amber-500 */
  --abk-warn-strong:       #b45309;
  --abk-warn-bg:           #fef3c7;
  --abk-warn-glow:         rgba(245,158,11,.30);
  --abk-err:               #ef4444;             /* red-500 */
  --abk-err-strong:        #b91c1c;
  --abk-err-bg:            #fee2e2;
  --abk-err-glow:          rgba(239,68,68,.30);
  --abk-info:              #06b6d4;             /* cyan-500 — info channel separado */
  --abk-info-strong:       #0e7490;
  --abk-info-bg:           #cffafe;

  /* ─── COLORES CATEGÓRICOS — paleta cualitativa de 6 ───
     Para distinguir categorías (roles, estados, tipos): "profesor verde" no
     es 'success', es un color asignado. Usados en 9+ módulos: estados de
     becas/facturación, badges de rol, estado "suspendido", etc. Cada token
     funciona como color de texto y como base de color-mix para fondo (15%)
     y borde (35%). */
  --abk-cat-violet:        #6d28d9;
  --abk-cat-blue:          #1d4ed8;
  --abk-cat-emerald:       #047857;
  --abk-cat-pink:          #be185d;
  --abk-cat-amber:         #b45309;
  --abk-cat-slate:         #475569;

  /* ─── INPUTS ─── */
  --abk-input-bg:          #ffffff;
  --abk-input-bg-soft:     #fafaff;             /* fuchsia-50 */
  --abk-input-border:      #ddd6fe;             /* violet-200 */
  --abk-input-border-focus:#8b5cf6;             /* fucsia primary */
  --abk-input-text:        #0f172a;
  --abk-input-placeholder: #a78bfa;             /* violet-400 — placeholder con tinte */
  --abk-input-ring:        rgba(139,92,246,.30); /* fucsia ring */

  /* ─── TIPOGRAFÍA ─── */
  --abk-font-family:       system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --abk-font-mono:         ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --abk-font-size-xs:      11px;
  --abk-font-size-sm:      12px;
  --abk-font-size-base:    14px;
  --abk-font-size-lg:      16px;
  --abk-font-size-h1:      clamp(22px, 2.5vw + 14px, 30px);  /* responsive: 22→30 */
  --abk-font-size-h2:      clamp(18px, 1vw + 14px, 20px);    /* responsive: 18→20 */
  --abk-font-size-h3:      16px;
  --abk-font-size-h4:      13px;
  --abk-font-weight-bold:  700;
  --abk-line-height:       1.5;
  --abk-line-height-tight: 1.2;

  /* Per-heading — defaults que la pestaña Tipografía del módulo Temas
     puede sobreescribir vía <style id="abk-design-config"> en <head>.
     Familia/color vacíos heredan: family → --abk-font-family,
     color → --abk-text-heading (h1, h2) o -heading-soft (h3, h4). */
  --abk-h1-family:    var(--abk-font-family);
  --abk-h1-weight:    800;
  --abk-h1-color:     var(--abk-text-heading);
  --abk-h1-tracking:  -.01em;
  --abk-h2-family:    var(--abk-font-family);
  --abk-h2-weight:    800;
  --abk-h2-color:     var(--abk-text-heading);
  --abk-h2-tracking:  -.01em;
  --abk-h3-family:    var(--abk-font-family);
  --abk-h3-weight:    700;
  --abk-h3-color:     var(--abk-text-heading-soft);
  --abk-h3-tracking:  -.01em;
  --abk-h4-family:    var(--abk-font-family);
  --abk-h4-weight:    700;
  --abk-h4-color:     var(--abk-text-heading-soft);

  /* ─── ESPACIADO ─── */
  --abk-space-1:           4px;
  --abk-space-2:           8px;
  --abk-space-3:           12px;
  --abk-space-4:           16px;
  --abk-space-5:           24px;
  --abk-space-6:           32px;
  --abk-section-padding:   18px;                /* legacy: configurable desde Diseño */
  --abk-section-gap:       14px;                /* legacy: configurable desde Diseño */

  /* ─── RADII ─── */
  --abk-radius-sm:         8px;
  --abk-radius:            12px;
  --abk-radius-lg:         16px;
  --abk-radius-pill:       999px;

  /* ─── SOMBRAS — tinted con fucsia (no neutras) ─── */
  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(139,92,246,.08);
  --abk-shadow-2:          0 4px 16px rgba(139,92,246,.10), 0 1px 3px rgba(0,0,0,.05);
  --abk-shadow-3:          0 8px 24px rgba(139,92,246,.14), 0 2px 6px rgba(0,0,0,.06);
  --abk-shadow-modal:      0 20px 60px rgba(139,92,246,.20), 0 8px 24px rgba(0,0,0,.20);
  --abk-shadow-focus:      0 0 0 3px var(--abk-input-ring);
  --abk-shadow-glow:       0 0 0 1px var(--abk-primary), 0 0 18px var(--abk-primary-glow);

  /* ─── MOTION ─── */
  --abk-ease:              cubic-bezier(.2,.7,.2,1);
  --abk-transition:        .2s var(--abk-ease);
  --abk-transition-fast:   .12s var(--abk-ease);

  /* ─── Z-INDEX ─── */
  --abk-z-sidebar:         900;
  --abk-z-header:          1001;
  --abk-z-modal-overlay:   1500;
  --abk-z-modal:           1501;
  --abk-z-toast:           2000;
  --abk-z-tooltip:         2100;
}

/* ============================================================================
   2) TOKENS — dark
   ============================================================================ */
html[data-theme="dark"] {
  /* Primary brillante en dark para que el morado pegue sobre noir */
  --abk-primary:           #a855f7;             /* purple-500 (más vivo en dark) */
  --abk-primary-2:         #8b5cf6;             /* violet-500 */
  --abk-primary-3:         #c4b5fd;             /* violet-300 */
  --abk-primary-deep:      #6d28d9;             /* violet-700 (deep sobre noir) */
  --abk-primary-soft:      #c4b5fd;             /* violet-300 */
  --abk-primary-ink:       #15102e;             /* texto sobre violet brillante = noir */
  --abk-on-primary:        #ffffff;
  --abk-primary-glow:      rgba(168,85,247,.45);
  /* --abk-bg-tint-primary hereda; el color-mix con --abk-primary-3 se
     re-resuelve solo en dark (primary-3 dark = #c4b5fd). */

  /* Accent cyan se mantiene vivo en dark — es el wow factor */
  --abk-accent:            #22d3ee;             /* cyan-400 */
  --abk-accent-2:          #06b6d4;             /* cyan-500 */
  --abk-accent-soft:       #67e8f9;             /* cyan-300 */
  --abk-accent-glow:       rgba(34,211,238,.40);

  /* Gradientes — versiones dark con más contraste */
  --abk-grad-primary:      linear-gradient(135deg, #a855f7 0%, #6d28d9 60%, #4338ca 100%);
  --abk-grad-text:         linear-gradient(120deg, #c4b5fd 0%, #f472b6 50%, #fde68a 100%);
  --abk-grad-hero:         radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.35), transparent 60%),
                           radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.18), transparent 60%);

  --abk-bg:                #15102e;             /* contenido — noir */
  --abk-bg-2:              #1a1232;             /* alterno — noir-2 */
  --abk-bg-shell:          #0a0a0c;             /* shell — neutro casi negro (sin morado) */
  --abk-surface:           #1a1232;             /* cards — noir-purple */
  --abk-surface-2:         #231946;             /* card alterno — noir-3 */
  --abk-surface-overlay:   rgba(9,6,15,.78);
  --abk-glass-bg:          rgba(26,15,36,.55);  /* glass over noir */
  --abk-glass-border:      rgba(168,85,247,.20);

  --abk-text:              #f3f0ff;             /* violet-100 — lectura cómoda en noir */
  --abk-text-soft:         rgba(243,232,255,.78);
  --abk-text-muted:        rgba(243,232,255,.55);
  --abk-text-on-primary:   #15102e;
  --abk-text-on-shell:     #ebe5ff;             /* pink-100 sobre noir = glow suave */
  --abk-text-heading:      #c4b5fd;             /* violet-300 en dark — buen contraste */
  --abk-text-heading-soft: #ddd6fe;             /* violet-200 */
  --abk-text-link:         #a855f7;             /* purple-500 brillante en dark */

  --abk-border-soft:       rgba(168,85,247,.15);
  --abk-border-section:    rgba(168,85,247,.30);
  --abk-border-strong:     rgba(168,85,247,.50);

  --abk-ok:                #34d399;
  --abk-ok-strong:         #6ee7b7;
  --abk-ok-bg:             rgba(16,185,129,.15);
  --abk-ok-glow:           rgba(52,211,153,.45);
  --abk-warn:              #fbbf24;
  --abk-warn-strong:       #fcd34d;
  --abk-warn-bg:           rgba(245,158,11,.15);
  --abk-warn-glow:         rgba(251,191,36,.40);
  --abk-err:               #f87171;
  --abk-err-strong:        #fca5a5;
  --abk-err-bg:            rgba(239,68,68,.15);
  --abk-err-glow:          rgba(248,113,113,.40);
  --abk-info:              #22d3ee;             /* cyan-400 dark */
  --abk-info-strong:       #67e8f9;
  --abk-info-bg:           rgba(8,145,178,.15);

  /* Categóricos dark — versiones claras para contraste sobre noir */
  --abk-cat-violet:        #c4b5fd;
  --abk-cat-blue:          #93c5fd;
  --abk-cat-emerald:       #6ee7b7;
  --abk-cat-pink:          #f9a8d4;
  --abk-cat-amber:         #fcd34d;
  --abk-cat-slate:         #cbd5e1;

  --abk-input-bg:          #231946;
  --abk-input-bg-soft:     rgba(255,255,255,.04);
  --abk-input-border:      rgba(168,85,247,.20);
  --abk-input-border-focus:#a855f7;
  --abk-input-text:        #f3f0ff;
  --abk-input-placeholder: rgba(243,232,255,.40);
  --abk-input-ring:        rgba(168,85,247,.35);

  /* Sombras dark con tinte fucsia (en lugar de negro plano) */
  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(139,92,246,.10);
  --abk-shadow-2:          0 4px 24px rgba(0,0,0,.40), 0 0 24px rgba(139,92,246,.06);
  --abk-shadow-3:          0 8px 30px rgba(0,0,0,.50), 0 0 30px rgba(139,92,246,.10);
  --abk-shadow-modal:      0 20px 60px rgba(0,0,0,.65), 0 0 80px rgba(139,92,246,.15);
}