/* ============================================================
   VARIABLES CSS - SISTEMA DE DISEÑO CYBERPUNK
   ------------------------------------------------------------
   Variables CSS para el sistema de diseño holográfico
   Optimizadas para temas claro y oscuro
============================================================ */

:root {
  /* Color System */
  --hue: 160;
  --saturation: 100%;
  --brightness-accent: 50%;
  --brightness-bg: 5%;
  --brightness-text: 95%;
  --brightness-muted: 70%;
  --brightness-feedback: 60%;

  /* Base Colors */
  --color-bg: hsla(var(--hue), var(--saturation), var(--brightness-bg), 1);
  --color-accent: hsla(var(--hue), var(--saturation), var(--brightness-accent), 1);
  --color-accent-glow: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) + 10%), 0.7);
  --color-accent-dark: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) - 15%), 1);
  --color-text: hsla(var(--hue), 10%, var(--brightness-text), 1);
  --color-muted: hsla(var(--hue), 10%, var(--brightness-muted), 1);
  --color-border: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) / 2), 0.3);
  --color-glass-bg: hsla(var(--hue), 30%, 15%, 0.15);
  --color-glass-hover: hsla(var(--hue), 40%, 20%, 0.25);
  --color-accent-rgb: 0, 255, 170;

  /* Feedback Colors */
  --color-feedback-success: hsla(120, 70%, var(--brightness-feedback), 1);
  --color-feedback-error: hsla(0, 100%, var(--brightness-feedback), 1);
  --color-feedback-warning: hsla(45, 100%, var(--brightness-feedback), 1);

  /* Timing */
  --transition-fast: 0.2s;
  --transition-medium: 0.4s;
  --transition-slow: 0.7s;

  /* Typography */
  --font-main: 'Share Tech Mono', monospace;
  --font-heading: 'VT323', monospace;

  /* HUD System */
  --hud-border-width: 2px;
  --hud-corner-size: 25px;
  --hud-line-thickness: 1px;
  --hud-glow: 0 0 6px var(--color-accent-glow), 0 0 12px var(--color-accent-glow);
  --hud-text-shadow: 0 0 4px var(--color-accent-glow);

  /* Animation Elements */
  --hud-dot-size: 2px;
  --hud-scan-speed: 1s;
  --hud-scan-width: 10px;
  --hud-dot-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) + 20%), 0.8);
  --hud-noise-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) + 30%), 0.5);
  --hud-data-streak-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) + 40%), 0.9);

  /* Responsive Breakpoints */
  --mobile-break: 768px;
  --tablet-break: 1024px;
}

/* Light Theme */
[data-theme="light"] {
  --hue: 200;
  --saturation: 50%;
  --brightness-bg: 95%;
  --brightness-accent: 45%;
  --brightness-text: 10%;
  --brightness-muted: 40%;
  --brightness-feedback: 45%;

  /* Recalculate colors */
  --color-bg: hsla(var(--hue), 20%, var(--brightness-bg), 1);
  --color-accent: hsla(var(--hue), 80%, var(--brightness-accent), 1);
  --color-accent-glow: hsla(var(--hue), 80%, calc(var(--brightness-accent) + 10%), 0.6);
  --color-accent-dark: hsla(var(--hue), 80%, calc(var(--brightness-accent) - 15%), 1);
  --color-text: hsla(var(--hue), 10%, var(--brightness-text), 1);
  --color-muted: hsla(var(--hue), 10%, var(--brightness-muted), 1);
  --color-border: hsla(var(--hue), 50%, calc(var(--brightness-accent)), 0.3);
  --color-glass-bg: hsla(var(--hue), 30%, 85%, 0.25);
  --color-glass-hover: hsla(var(--hue), 40%, 75%, 0.35);
  --color-accent-rgb: 0, 170, 255;

  /* Feedback Colors */
  --color-feedback-success: hsla(120, 70%, var(--brightness-feedback), 1);
  --color-feedback-error: hsla(0, 100%, var(--brightness-feedback), 1);
  --color-feedback-warning: hsla(45, 100%, var(--brightness-feedback), 1);

  /* Animation Elements */
  --hud-dot-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) - 10%), 0.8);
  --hud-noise-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) - 20%), 0.5);
  --hud-data-streak-color: hsla(var(--hue), var(--saturation), calc(var(--brightness-accent) - 30%), 0.9);
}