/**
 * Design Tokens - CatWatchful
 * Sistema de diseño unificado
 */

: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);

  /* 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 semánticos */
  --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-primary-soft: rgba(145, 127, 251, 0.14);
  --color-danger-gradient: #ff5f6d;

  /* Texto - contraste mejorado para legibilidad (WCAG AA) */
  --color-text-primary: #d1dce2;
  --color-text-light: #f0f2f5;
  --color-text-inverse: #ffffff;
  --color-text-tertiary: #93a7b5;
  --color-text-muted: #5f7586;

  /* Bordes semánticos */
  --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);

  /* Terminal (ServiceStatus) */
  --color-terminal-bg: rgba(6, 16, 24, 0.96);
  --color-terminal-green: #7ff7bd;
  --color-terminal-red: #ff5f56;
  --color-terminal-yellow: #ffbd2f;
  --color-terminal-blue: #9bc9e5;
  --color-terminal-muted: #93a7b5;
  --color-terminal-prefix: #7fa6be;
  --color-terminal-cmd: #e2f4ff;
  --color-terminal-ready: #89f5c6;
  --color-terminal-warn: #ffd17d;
  --color-terminal-online: #56f3ad;
  --color-terminal-offline: #7d8b95;

  /* Scrollbar y utilidades */
  --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%);

  /* ========== 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 */
.border-primary { border: 1px solid var(--color-primary); }
.border-secondary { border: 1px solid var(--color-secondary-muted); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Colores de texto */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-primary); }

/* Texto de alta legibilidad sobre fondos oscuros */
.download-description,
.text-high-contrast {
  color: var(--color-text-light);
  font-weight: var(--font-medium);
}

/* Cards con diseño 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);
}