/**
 * Design Tokens - CatWatchful Reseller
 * Sistema de diseno unificado (sincronizado con landing page)
 */

:root {
  /* ========== COLORES ========== */
  
  /* Primarios / Marca */
  --color-primary: #917FFB;
  --color-primary-rgb: 145, 127, 251;
  --color-primary-hover: #a391fc;
  --color-primary-muted: rgba(145, 127, 251, 0.2);
  --color-primary-soft: rgba(145, 127, 251, 0.14);

  /* Secundario / Azul */
  --color-secondary: #074179;
  --color-secondary-rgb: 7, 65, 121;
  --color-secondary-muted: rgba(7, 65, 121, 0.7);
  --color-secondary-soft: rgba(7, 65, 121, 0.25);

  /* Estados semanticos */
  --color-success: #8BC34A;
  --color-success-rgb: 139, 195, 74;
  --color-danger: #dc3545;
  --color-danger-rgb: 220, 53, 69;
  --color-warning: #ffc107;

  /* Fondos */
  --color-bg-base: #080809;
  --color-bg-surface: #0e161b;
  --color-bg-surface-alt: #0f1215;
  --color-bg-elevated: #18191a;
  --color-bg-card: rgba(0, 0, 0, 0.7);
  --color-bg-overlay: rgba(0, 0, 0, 0.8);
  --color-bg-input: #2d2d2d;

  /* Bordes y superficies neutras */
  --color-border: #2c3035;
  --color-border-muted: #574c4c;
  --color-surface-muted: #2e2e2e;
  --color-surface-dark: #0f171f;

  /* Acento / Cyan */
  --color-accent-cyan: #00e5ff;
  --color-accent-cyan-rgb: 88, 199, 255;
  --color-accent-cyan-muted: rgba(88, 199, 255, 0.16);
  --color-accent-cyan-soft: rgba(88, 199, 255, 0.06);

  /* Variantes suaves */
  --color-danger-gradient: #ff5f6d;

  /* Texto */
  --color-text-primary: #d1dce2;
  --color-text-light: #f0f2f5;
  --color-text-inverse: #ffffff;
  --color-text-tertiary: #93a7b5;
  --color-text-muted: #5f7586;

  /* Bordes semanticos */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);

  /* Overlays */
  --color-overlay-light: rgba(255, 255, 255, 0.08);
  --color-overlay-dark: rgba(0, 0, 0, 0.6);

  /* Scrollbar */
  --color-scrollbar-track: #818181;
  --color-scrollbar-thumb: #555555;

  /* ========== ESPACIADO ========== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ========== SOMBRAS ========== */
  --shadow-primary: 0 0 2px var(--color-primary);
  --shadow-card: 0 4px 8px 0 var(--color-secondary-muted), 0 6px 20px 0 rgba(7, 65, 121, 0.2);
  --shadow-card-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-inset: inset 0 0 6px rgba(0, 0, 0, 0.3);
  --shadow-glow-primary: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
  --shadow-glow-cyan: 0 0 12px rgba(88, 199, 255, 0.5);
  --shadow-elevated: 0 16px 30px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.2);

  /* ========== GRADIENTES ========== */
  --gradient-surface: linear-gradient(var(--color-bg-surface), var(--color-bg-surface-alt));
  --gradient-dark: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-surface-alt) 100%);
  --gradient-primary: linear-gradient(120deg, #7e6cf2, #917ffb 42%, #5f6ee6);
  --gradient-danger: linear-gradient(110deg, var(--color-danger), var(--color-danger-gradient));

  /* ========== TRANSICIONES ========== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ========== CLASES UTILITARIAS ========== */

/* Fondos */
.bg-card { background-color: var(--color-bg-card); }
.bg-surface-dark { background-color: var(--color-surface-dark); }
.bg-input { background-color: var(--color-bg-input); }

/* Bordes */
.grayBorder { border: 1px solid var(--color-border); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Sombras */
.blueShadow { box-shadow: var(--shadow-card); }

/* Gradientes */
.blackGradient { background: var(--gradient-surface); }

/* Cards con diseno consistente */
.card-token {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Inputs */
.input-token {
  background-color: var(--color-bg-input);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* Texto de alta legibilidad */
.text-high-contrast {
  color: var(--color-text-light);
  font-weight: var(--font-medium);
}

/* Fondos translucidos */
.fondoTransClaro {
  background-color: var(--color-primary-muted);
}
.fondoTransOscuro {
  background-color: rgba(0, 0, 0, 0.4);
}
.fondoTransVerde {
  background-color: rgba(var(--color-success-rgb), 0.2);
}
.fondoTransRojo {
  background-color: rgba(var(--color-danger-rgb), 0.4);
}
.fondoNegro {
  background-color: var(--color-bg-overlay);
}

/* Blur */
.divBlur {
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.divBlur2 {
  filter: blur(13px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.divBlur3 {
  filter: blur(20px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Animaciones blob */
.blob {
  background: var(--color-bg-base);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse-black 2s infinite;
  border-radius: var(--radius-md);
}

.blob.green {
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 1);
  animation: pulse-green 2s infinite;
}
.blob.blue {
  background: var(--color-secondary);
  box-shadow: 0 0 0 0 rgba(var(--color-secondary-rgb), 1);
  animation: pulse-blue 2s infinite;
}
.blob.red {
  background: var(--color-danger);
  box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 1);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}
@keyframes pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-danger-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0); }
}
@keyframes pulse-blue {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-secondary-muted); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-secondary-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-secondary-rgb), 0); }
}