@layer tokens {
  :root {
    /* Brand Colors */
    --nx-brand-1: #a879ff;
    --nx-brand-2: #8a5cff;
    --nx-brand-3: #6e3bff;
    
    /* Background Colors */
    --nx-bg: #101216;
    --nx-panel: #1b1f28;
    --nx-surface: #252932;
    --surface-1: #0f1115;
    
    /* Text Colors */
    --nx-ink: #e8eff7;
    --nx-ink-weak: #b6c2d0;
    --nx-ink-muted: #8a95a6;
    
    /* Accent Colors */
    --nx-accent: #19e6ff;
    --nx-accent-weak: #93eafd;
    
    /* Border & Ring */
    --nx-ring: rgba(255, 255, 255, 0.12);
    --nx-ring-hover: rgba(25, 230, 255, 0.35);
    
    /* Spacing */
    --nx-padding: 18px;
    --nx-margin: 12px;
    
    /* Border Radius */
    --nx-radius-sm: 8px;
    
    /* Shadows */
    --nx-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --nx-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --nx-transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    
    /* Typography */
    --nx-font-weight-normal: 400;
    --nx-font-weight-medium: 500;
    --nx-font-weight-semibold: 600;
    --nx-font-weight-bold: 700;
    --nx-font-weight-extrabold: 800;
    
    /* Font Sizes */
    --nx-text-sm: 0.9rem;
    --nx-text-base: 1rem;
    --nx-text-lg: 1.05rem;
    --nx-text-xl: 1.25rem;

    /* === PR22: VARIABLES CONSOLIDADAS (añadidas) =============================== */

    /* NOTA: mantener nombres semánticos; evitar solapamientos por contexto.      */

    /* Si existe sinónimo, mapear uno a otro y deprecar el duplicado en módulos.  */

    /* Colores principales */
    --color-background: #0a0b0e;
    --color-background-secondary: #12141a;
    --color-text: #f5f5f7;
    --color-text-secondary: #a0a0a7;
    
    /* Colores de acento neón */
    --color-primary: #00f0ff;
    --color-primary-glow: rgba(0, 240, 255, 0.5);
    --color-secondary: #ff00e5;
    --color-secondary-glow: rgba(255, 0, 229, 0.5);
    --color-tertiary: #7000ff;
    --color-tertiary-glow: rgba(112, 0, 255, 0.5);
    
    /* Colores de UI */
    --color-card-bg: #1a1c25;
    --color-border: #2a2d3a;
    --color-input-bg: #1a1c25;
    --color-input-border: #2a2d3a;
    
    /* Tipografía */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto Mono', monospace;
    
    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 5rem;
    
    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 20px;
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Variables específicas de nx.css */
    --nx-gap: 24px;
    --nx-radius: 16px;
    --nx-speed: 160ms;
    --nx-glow: rgba(255,255,255,.08);
    --nx-border: rgba(255,255,255,.12);
    --nx-card-bg: var(--surface-1, #0f1115);

    /* Aliases temporales (mapeos de nombres duplicados) */
    --brand-cyan: var(--color-primary);
    --brand-purple: var(--color-secondary);
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --card-bg: var(--color-card-bg);
    --card-border: var(--color-border);
    --card-hover-shadow: var(--shadow-md);
    --card-shadow: var(--shadow-sm);
    --radius-lg: var(--border-radius-lg);
    --space-lg: var(--spacing-lg);
    --anim-normal: var(--transition-normal);
  }
}