/* ================================================================
   HeyPilas — CSS Variables / Design Tokens
   Reemplaza ~1,157 líneas de dark-mode duplicado.
   Solo modifica este archivo para cambiar el tema completo.
   ================================================================ */

:root {
  /* ── Brand ── */
  --hp-primary: #1E74FD;
  --hp-primary-dark: #0a58ca;
  --hp-secondary: #592BCA;
  --hp-secondary-dark: #5027b5;

  /* ── Semantic ── */
  --hp-success: #34C759;
  --hp-success-dark: #2fb350;
  --hp-danger: #EC4433;
  --hp-danger-dark: #ea2f1c;
  --hp-warning: #FE9500;
  --hp-warning-dark: #e58600;
  --hp-warning-light: #f99400;

  /* ── Text ── */
  --hp-text-primary: #141515;
  --hp-text-secondary: #4F5050;
  --hp-text-muted: #6C7C94;
  --hp-text-light: #A1A1A2;
  --hp-text-inverse: #FFFFFF;

  /* ── Surfaces ── */
  --hp-bg: #FFFFFF;
  --hp-bg-light: #F9FAFB;
  --hp-bg-dark: #141515;
  --hp-header-bg: #FFFFFF;
  --hp-card-bg: #FFFFFF;

  /* ── Borders ── */
  --hp-border: #E1E1E1;
  --hp-border-light: #f3f4f6;
  --hp-border-dark: #1B283B;

  /* ── Shadows ── */
  --hp-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --hp-shadow: 0 1px 4px rgba(0,0,0,.08);
  --hp-shadow-lg: 0 4px 16px rgba(0,0,0,.12);
}

/* ── DARK MODE ───────────────────────────────────────────────── */
body.dark-mode-active {
  --hp-primary: #3b82f6;
  --hp-primary-dark: #60a5fa;
  --hp-secondary: #7c4dff;
  --hp-secondary-dark: #9575ff;

  --hp-success: #34C759;
  --hp-success-dark: #3ddb6b;
  --hp-danger: #EC4433;
  --hp-danger-dark: #f25c4d;
  --hp-warning: #FE9500;
  --hp-warning-dark: #ffb340;
  --hp-warning-light: #ffa726;

  --hp-text-primary: #FFFFFF;
  --hp-text-secondary: #8195a6;
  --hp-text-muted: #586d7f;
  --hp-text-light: #617085;
  --hp-text-inverse: #141515;

  --hp-bg: #0c1624;
  --hp-bg-light: #0F1C2F;
  --hp-bg-dark: #0c1624;
  --hp-header-bg: #0F1C2F;
  --hp-card-bg: #0F1C2F;

  --hp-border: #1B283B;
  --hp-border-light: #1f2937;
  --hp-border-dark: #E1E1E1;

  --hp-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --hp-shadow: 0 1px 4px rgba(0,0,0,.4);
  --hp-shadow-lg: 0 4px 16px rgba(0,0,0,.5);
}