/* ══════════════════════════════════════════════════════════════════════════════
   LUZOkit Design Tokens — Canonical Source
   Versión: 2.3 (color-scheme fix + midnight contrast fix)
   Fecha:   2026-04-19

   REGLAS:
   1. Este archivo es la UNICA fuente de verdad para tokens CSS.
   2. lk-theme.css ya NO existe — todo vive aquí.
   3. Tokens estructurales (spacing, radius, font, z-index, motion, blur,
      layout) van solo en :root — NO cambian por tema.
   4. Tokens de color/superficie van en :root + [data-theme="dark"] +
      [data-theme="midnight"] — SIEMPRE los tres.
   5. Convención canónica: --lk-<categoría>-<variante>
   6. Sección BRIDGE al final mapea nombres legacy → canónicos.
      Se elimina progresivamente en T2–T4 al reescribir cada archivo.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── Light (default) + Estructurales ───────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ─ Estructurales (invariantes por tema) ─ */

  --lk-layout-top-h:      52px;
  --lk-layout-footer-h:   32px;
  --lk-layout-rail-w:     64px;
  --lk-layout-panel-w:    220px;

  --lk-space-1:   4px;
  --lk-space-2:   8px;
  --lk-space-3:  12px;
  --lk-space-4:  16px;

  --lk-radius-sm:   4px;
  --lk-radius-md:   8px;
  --lk-radius-lg:  12px;
  --lk-radius-xl:  18px;

  --lk-font-xs:   11px;
  --lk-font-sm:   12px;
  --lk-font-md:   13px;
  --lk-font-lg:   15px;
  --lk-font-xl:   18px;
  --lk-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lk-font-mono: 'SF Mono', ui-monospace, Menlo, monospace;

  --lk-z-dropdown:  100;
  --lk-z-sticky:    200;
  --lk-z-modal:     500;
  --lk-z-toast:     900;

  --lk-transition-fast:    120ms ease;
  --lk-transition-normal:  220ms ease;

  --lk-blur-sm:  blur(8px);
  --lk-blur-md:  blur(16px);

  /* ─ Surfaces ─ */

  --lk-bg-body:      #f1f5f9;
  --lk-bg-card:      #ffffff;
  --lk-bg-surface:   #f8fafc;
  --lk-bg-sidebar:   #ffffff;
  --lk-bg-topbar:    rgba(255,255,255,.92);
  --lk-bg-hover:     rgba(0,0,0,.05);
  --lk-bg-active:    rgba(109,40,217,.10);
  --lk-bg-selected:  #ede9fe;

  /* ─ Text ─ */

  --lk-text-primary:    #0f172a;
  --lk-text-secondary:  #334155;
  --lk-text-muted:      #475569;
  --lk-text-faint:      #94a3b8;
  --lk-text-inverse:    #ffffff;

  /* ─ Border ─ */

  --lk-border:       rgba(0,0,0,.12);
  --lk-border-soft:  rgba(0,0,0,.06);

  /* ─ Brand ─ */

  --lk-brand:           #6d28d9;
  --lk-brand-soft:      #7c3aed;
  --lk-brand-muted:     rgba(109,40,217,.15);
  --lk-brand-hover:     rgba(109,40,217,.85);
  --lk-brand-border:    rgba(109,40,217,.30);
  --lk-brand-shadow:    rgba(109,40,217,.25);

  /* ─ Semantic ─ */

  --lk-red:          #dc2626;
  --lk-red-soft:     rgba(220,38,38,.10);
  --lk-green:        #16a34a;
  --lk-green-soft:   rgba(22,163,74,.10);
  --lk-amber:        #d97706;
  --lk-amber-soft:   rgba(217,119,6,.10);
  --lk-blue:         #2563eb;
  --lk-blue-soft:    rgba(37,99,235,.10);
  --lk-teal:         #0891b2;
  --lk-teal-soft:    rgba(8,145,178,.10);

  /* ─ Elevation ─ */

  --lk-shadow-sm:    0 1px 3px rgba(0,0,0,.3);
  --lk-shadow-md:    0 4px 16px rgba(0,0,0,.4);
  --lk-shadow-lg:    0 12px 40px rgba(0,0,0,.5);
  --lk-ring-focus:   0 0 0 3px rgba(109,40,217,.25);
}


/* ══════════════════════════════════════════════════════════════════════════════
   Dark — Neutral Gray (estilo Claude)
   Grises puros, cero tinte azul. Brand purple resalta sobre fondo neutro.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  color-scheme: dark;

  --lk-bg-body:      #121212;
  --lk-bg-card:      #1e1e1e;
  --lk-bg-surface:   #181818;
  --lk-bg-sidebar:   #1e1e1e;
  --lk-bg-topbar:    rgba(30,30,30,.94);
  --lk-bg-hover:     rgba(255,255,255,.06);
  --lk-bg-active:    rgba(139,92,246,.22);
  --lk-bg-selected:  rgba(139,92,246,.18);

  --lk-text-primary:    #e8e8e8;
  --lk-text-secondary:  #c0c0c0;
  --lk-text-muted:      #a0a0a0;
  --lk-text-faint:      #5c5c5c;
  --lk-text-inverse:    #121212;

  --lk-border:       rgba(255,255,255,.10);
  --lk-border-soft:  rgba(255,255,255,.05);

  --lk-brand:           #8b5cf6;
  --lk-brand-soft:      #a78bfa;
  --lk-brand-muted:     rgba(139,92,246,.25);
  --lk-brand-hover:     rgba(139,92,246,.85);
  --lk-brand-border:    rgba(139,92,246,.40);
  --lk-brand-shadow:    rgba(139,92,246,.30);

  --lk-red:          #f85149;
  --lk-red-soft:     rgba(248,81,73,.12);
  --lk-green:        #3fb950;
  --lk-green-soft:   rgba(63,185,80,.12);
  --lk-amber:        #d29922;
  --lk-amber-soft:   rgba(210,153,34,.12);
  --lk-blue:         #58a6ff;
  --lk-blue-soft:    rgba(88,166,255,.12);
  --lk-teal:         #39c5cf;
  --lk-teal-soft:    rgba(57,197,207,.12);

  --lk-shadow-sm:    0 1px 4px rgba(0,0,0,.5);
  --lk-shadow-md:    0 4px 20px rgba(0,0,0,.6);
  --lk-shadow-lg:    0 12px 48px rgba(0,0,0,.7);
  --lk-ring-focus:   0 0 0 3px rgba(139,92,246,.40);
}


/* ══════════════════════════════════════════════════════════════════════════════
   Midnight — Deep Blue
   Azul profundo oceánico. Más oscuro que dark, con saturación azul en todo:
   fondos, bordes, hovers. Para quienes trabajan de noche.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="midnight"] {
  color-scheme: dark;

  --lk-bg-body:      #06080f;
  --lk-bg-card:      #0f1318;
  --lk-bg-surface:   #0a0e16;
  --lk-bg-sidebar:   #0c1019;
  --lk-bg-topbar:    rgba(8,12,22,.97);
  --lk-bg-hover:     rgba(130,160,255,.05);
  --lk-bg-active:    rgba(124,58,237,.18);
  --lk-bg-selected:  rgba(124,58,237,.14);

  --lk-text-primary:    #d4dae5;
  --lk-text-secondary:  #a8b2c4;
  --lk-text-muted:      #7b8ba0;
  --lk-text-faint:      #3d4d63;
  --lk-text-inverse:    #06080f;

  --lk-border:       rgba(100,140,220,.10);
  --lk-border-soft:  rgba(100,140,220,.05);

  --lk-brand:           #7c3aed;
  --lk-brand-soft:      #a78bfa;
  --lk-brand-muted:     rgba(124,58,237,.20);
  --lk-brand-hover:     rgba(124,58,237,.85);
  --lk-brand-border:    rgba(124,58,237,.35);
  --lk-brand-shadow:    rgba(124,58,237,.22);

  --lk-red:          #f85149;
  --lk-red-soft:     rgba(248,81,73,.10);
  --lk-green:        #3fb950;
  --lk-green-soft:   rgba(63,185,80,.10);
  --lk-amber:        #d29922;
  --lk-amber-soft:   rgba(210,153,34,.10);
  --lk-blue:         #58a6ff;
  --lk-blue-soft:    rgba(88,166,255,.10);
  --lk-teal:         #39c5cf;
  --lk-teal-soft:    rgba(57,197,207,.10);

  --lk-shadow-sm:    0 1px 4px rgba(0,0,0,.6);
  --lk-shadow-md:    0 4px 20px rgba(0,0,0,.7);
  --lk-shadow-lg:    0 12px 48px rgba(0,0,0,.85);
  --lk-ring-focus:   0 0 0 3px rgba(124,58,237,.35);
}


/* ══════════════════════════════════════════════════════════════════════════════
   BRIDGE — Legacy names → --lk-* canónicos
   CSS custom properties resuelven lazily: var(--bg-body) apunta a
   var(--lk-bg-body) que se resuelve al valor del tema activo en runtime.
   ══════════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"],
[data-theme="midnight"] {

  /* ─ Surfaces ─ */
  --bg-body:        var(--lk-bg-body);
  --bg-card:        var(--lk-bg-card);
  --bg-surface:     var(--lk-bg-surface);
  --bg-sidebar:     var(--lk-bg-sidebar);
  --bg-topbar:      var(--lk-bg-topbar);
  --bg-hover:       var(--lk-bg-hover);
  --bg-active:      var(--lk-bg-active);
  --bg-selected:    var(--lk-bg-selected);
  --bg-secondary:   var(--lk-bg-hover);
  --panel:          var(--lk-bg-card);
  --tx-surface:     var(--lk-bg-surface);
  --tx-surface-2:   var(--lk-bg-card);

  /* ─ Text ─ */
  --tx-base:        var(--lk-text-primary);
  --tx-text:        var(--lk-text-primary);
  --tx-primary:     var(--lk-text-primary);
  --tx-main:        var(--lk-text-primary);
  --tx-secondary:   var(--lk-text-secondary);
  --tx-text-sec:    var(--lk-text-secondary);
  --tx-muted:       var(--lk-text-muted);
  --tx-dim:         var(--lk-text-faint);
  --tx-inverse:     var(--lk-text-inverse);

  /* ─ Border ─ */
  --border:         var(--lk-border);
  --border-soft:    var(--lk-border-soft);
  --tx-line:        var(--lk-border);

  /* ─ Brand ─ */
  --c-brand:        var(--lk-brand);
  --c-brand-soft:   var(--lk-brand-soft);
  --c-brand-muted:  var(--lk-brand-muted);
  --c-brand-bd:     var(--lk-brand-muted);
  --c-brand-lt:     var(--lk-bg-active);
  --accent:         var(--lk-brand);
  --accent-bd:      var(--lk-brand-muted);
  --accent-hov:     var(--lk-brand-hover);
  --accent-lt:      var(--lk-bg-active);

  /* ─ Shell aliases (luzokit-shell.css) ─ */
  --luzo-accent:         var(--lk-brand);
  --luzo-accent-border:  var(--lk-brand-muted);
  --luzo-accent-light:   var(--lk-bg-active);
  --luzo-accent-shadow:  var(--lk-brand-shadow);

  /* ─ Semantic ─ */
  --tx-red:       var(--lk-red);
  --tx-green:     var(--lk-green);
  --tx-amber:     var(--lk-amber);
  --tx-blue:      var(--lk-blue);
  --tx-teal:      var(--lk-teal);

  /* ─ Elevation ─ */
  --shadow-sm:    var(--lk-shadow-sm);
  --shadow-md:    var(--lk-shadow-md);
  --shadow-lg:    var(--lk-shadow-lg);

  /* ─ Module bridge (com-center, comunicaciones) ─ */
  --lk-surface:         var(--lk-bg-surface);
  --lk-mod-line:        var(--lk-border-soft);
  --lk-prim-radius-md:  var(--lk-radius-md);

  /* ─ Structural (legacy names) ─ */
  --font-xs:    var(--lk-font-xs);
  --font-sm:    var(--lk-font-sm);
  --font-md:    var(--lk-font-md);
  --font-lg:    var(--lk-font-lg);
  --font-xl:    var(--lk-font-xl);
  --font-sans:  var(--lk-font-sans);
  --font-mono:  var(--lk-font-mono);
  --font-ui:    var(--lk-font-sans);
  --radius-sm:  var(--lk-radius-sm);
  --radius-md:  var(--lk-radius-md);
  --radius-lg:  var(--lk-radius-lg);
  --radius-xl:  var(--lk-radius-xl);
  --space-1:    var(--lk-space-1);
  --space-2:    var(--lk-space-2);
  --space-3:    var(--lk-space-3);
  --space-4:    var(--lk-space-4);
  --top-h:            var(--lk-layout-top-h);
  --topbar-h:         var(--lk-layout-top-h);
  --shell-topbar-h:   var(--lk-layout-top-h);
  --footer-h:         var(--lk-layout-footer-h);
  --rail-w:           var(--lk-layout-rail-w);
  --z-dropdown:       var(--lk-z-dropdown);
  --z-sticky:         var(--lk-z-sticky);
  --z-modal:          var(--lk-z-modal);
  --z-toast:          var(--lk-z-toast);
  --transition-fast:   var(--lk-transition-fast);
  --transition-normal: var(--lk-transition-normal);
  --blur-sm:           var(--lk-blur-sm);
  --blur-md:           var(--lk-blur-md);
  --mod-topbar-h:      0px;
}