/* ========================================
   CSS VARIABLES - c2lynx
   Paleta de colores y variables globales
======================================== */

:root {
    /* ================== MODO CLARO ================== */
    /* Fondos */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F1F3F4;
    --bg-overlay: rgba(255, 255, 255, 0.95);

    /* Textos */
    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
    --text-tertiary: #6A6A6A;
    --text-muted: #222222;
    --text-location: #585858;

    /* Colores principales */
    --color-primary: #16ffff; 
    --color-primary-hover: #a2f6ff;
    --color-primary-light: #33C7D9;
    --color-hover-light: #cffaff;
    
    --color-secondary: #E5E5E5;
    --color-secondary-hover: #D0D0D0;
    --color-secondary-light: #F0F0F0;

    --color-accent: #333333;
    --color-accent-hover: #4A4A4A;
    --color-accent-light: #6A6A6A;
      
  
    /* Bordes y divisores */
    --border-color: #E0E0E0;
    --border-color-light: #F0F0F0;
    --border-color-dark: #CCCCCC;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
  
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
  
    /* Inputs */
    --input-bg: #FFFFFF;
    --input-border: #E0E0E0;
    --input-focus: var(--color-primary);
    --input-focus-shadow: rgba(0, 191, 255, 0.25);
  
    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
  
    /* Tipografía */
    --font-family: 'Poppins','Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
  
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;
  
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    /* Z-index */
    --z-dropdown: 1000;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-top: 9999;
  }
  
  /* ================== MODO OSCURO ================== */
  [data-theme="dark"] {
    /* Fondos */
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #121212;
    --bg-overlay: rgba(0, 0, 0, 0.85);

    /* Textos */
    --text-primary: #EAEAEA;
    --text-secondary: #B3B3B3;
    --text-tertiary: #888888;
    --text-muted: #000000;
    --text-location: #21f8ff;
    
    /* Colores principales */
    --color-primary: #00ffff; 
    --color-primary-hover: #00e6e691;
    --color-primary-light: #33ffff;
    --color-hover-light: #00e4ff40;

    --color-secondary: #4A4A4A;
    --color-secondary-hover: #5A5A5A;
    --color-secondary-light: #6A6A6A;

    --color-accent: #FFFFFF;
    --color-accent-hover: #F0F0F0;
    --color-accent-light: #CCCCCC;
    
    /*********************/
  
    /* Bordes y divisores */
    --border-color: #2A2A2A;
    --border-color-light: #333333;
    --border-color-dark: #1F1F1F;
  
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
  
    /* Inputs */
    --input-bg: #1A1A1A;
    --input-border: #2A2A2A;
    --input-focus: var(--color-primary);
    --input-focus-shadow: rgba(0, 191, 255, 0.35);
  }
  
  /* ================== RESPONSIVE BREAKPOINTS ================== */
  :root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
  }