/* Design tokens: the only place a colour, a font or an alpha is chosen.
   Eleven channels plus a twelve-step alpha ladder (see the comments inside). No other
   stylesheet may introduce a raw colour value. */

:root {
  /* Channels for the alpha ladder below. */
  --rgb-white:   255, 255, 255;
  --rgb-black:   0, 0, 0;
  --rgb-slate:   148, 163, 184;
  --rgb-inv:     59, 130, 246;
  --rgb-conf:    16, 185, 129;
  --rgb-ai:      139, 92, 246;
  --rgb-drift:   245, 158, 11;
  --rgb-crit:    239, 68, 68;
  --rgb-bg-0:    7, 9, 13;
  --rgb-bg-1:    11, 15, 21;
  --rgb-surface: 19, 25, 35;

  /* Base — Slate/Zinc dark default */
  --bg-0:        #07090d;
  --bg-1:        #0b0f15;
  --bg-2:        #0f141c;
  --surface:     #131923;
  --surface-2:   #1a2230;
  --surface-glass: rgba(19, 25, 35, 0.75);
  --border:      rgba(var(--rgb-slate), 0.12);
  --border-2:    rgba(var(--rgb-slate), 0.2);
  --border-glow: rgba(var(--rgb-white), 0.08);
  --text-1:      #f1f5f9;
  --text-2:      #cbd5e1;
  --text-3:      #94a3b8;
  --text-mute:   #64748b;

  /* Semantic palette */
  --c-inv:       #3b82f6;  /* Coste de Inventario — azul cobalto */
  --c-conf:      #10b981;  /* Cobertura Conformal — verde esmeralda */
  --c-ai:        #8b5cf6;  /* Precisión IA MAE — púrpura neón */
  --c-drift:     #f59e0b;  /* Alertas Drift — naranja */
  --c-crit:      #ef4444;  /* Fuera de banda / error — rojo */
  --c-slate:     #94a3b8;  /* Gris de ejes y rejillas */

  /* Bright ramp */
  --c-inv-bright:   #60a5fa;
  --c-conf-bright:  #34d399;
  --c-ai-bright:    #a78bfa;
  --c-drift-bright: #fbbf24;
  --c-crit-bright:  #f87171;

  /* Deepest surface */
  --bg-deep:     #050710;

  --c-inv-soft:  rgba(var(--rgb-inv), 0.14);
  --c-conf-soft: rgba(var(--rgb-conf), 0.14);
  --c-ai-soft:   rgba(var(--rgb-ai), 0.14);
  --c-drift-soft:rgba(var(--rgb-drift), 0.14);
  --c-crit-soft: rgba(var(--rgb-crit), 0.14);

  /* Modern ambient glows & shadows */
  --glow-inv:    0 0 24px -4px rgba(var(--rgb-inv), 0.35);
  --glow-conf:   0 0 24px -4px rgba(var(--rgb-conf), 0.35);
  --glow-ai:     0 0 24px -4px rgba(var(--rgb-ai), 0.35);
  --glow-drift:  0 0 24px -4px rgba(var(--rgb-drift), 0.35);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* High-contrast Light Mode Theme */
[data-theme="light"] {
  --rgb-white:   0, 0, 0;
  --rgb-black:   255, 255, 255;
  --rgb-slate:   100, 116, 139;
  --rgb-bg-0:    248, 250, 252;
  --rgb-bg-1:    241, 245, 249;
  --rgb-surface: 255, 255, 255;

  --bg-0:        #f8fafc;
  --bg-1:        #f1f5f9;
  --bg-2:        #e2e8f0;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --surface-glass: rgba(255, 255, 255, 0.85);
  --border:      rgba(100, 116, 139, 0.16);
  --border-2:    rgba(100, 116, 139, 0.28);
  --border-glow: rgba(0, 0, 0, 0.06);
  --text-1:      #0f172a;
  --text-2:      #334155;
  --text-3:      #64748b;
  --text-mute:   #94a3b8;

  --bg-deep:     #f8fafc;

  --c-inv-soft:  rgba(59, 130, 246, 0.10);
  --c-conf-soft: rgba(16, 185, 129, 0.10);
  --c-ai-soft:   rgba(139, 92, 246, 0.10);
  --c-drift-soft:rgba(245, 158, 11, 0.10);
  --c-crit-soft: rgba(239, 68, 68, 0.10);

  --glow-inv:    0 0 20px -4px rgba(59, 130, 246, 0.20);
  --glow-conf:   0 0 20px -4px rgba(16, 185, 129, 0.20);
  --glow-ai:     0 0 20px -4px rgba(139, 92, 246, 0.20);
  --glow-drift:  0 0 20px -4px rgba(245, 158, 11, 0.20);
  --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
  --shadow-glass: 0 8px 30px 0 rgba(15, 23, 42, 0.08);
}