:root {
    /* ===== COLORS: BLACK THEME (DEFAULT) ===== */
    /* ===== FONDOS PRINCIPALES ===== */
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-tertiary: #080808;

    /* ===== FONDOS CON OPACIDAD ===== */
    --bg-navbar: rgba(18, 18, 18, 0.9);
    --bg-navbar-transparent: rgba(18, 18, 18, 0.8);
    --bg-card: rgba(26, 26, 26, 0.6);
    --bg-hover-soft: rgba(26, 26, 26, 0.95);

    /* ===== ELEMENTOS DE SUPERFICIE ===== */
    --surface-dark: rgb(17, 17, 17);
    /* negro grisáceo oscuro */
    --surface-medium: rgb(38, 38, 38);
    /* gris oscuro medio */
    --surface-light: rgb(64, 64, 64);
    /* gris medio */
    --surface-tag: rgba(38, 38, 38, 0.5);
    /* gris oscuro con transparencia */

    /* ===== BORDES ===== */
    --border-primary: rgb(38, 38, 38);
    /* gris oscuro */
    --border-primary-50: rgba(38, 38, 38, 0.5);
    /* gris oscuro 50% */
    --border-secondary: rgb(64, 64, 64);
    /* gris medio */
    --border-soft: #2a2a2a;
    --border-blue-soft: rgba(64, 64, 64, 0.3);
    /* gris medio transparente */
    --border-cyan: rgb(115, 115, 115);
    /* gris claro */
    --border-cyan-dark: rgb(77, 77, 77);
    /* gris medio-oscuro */

    /* ===== ACENTOS (GRISES Y BLANCOS) ===== */
    --accent-cyan-primary: #e5e5e5;
    /* gris muy claro (casi blanco) */
    --accent-cyan-light: #f5f5f5;
    /* blanco grisáceo */
    --accent-cyan-500: rgb(200, 200, 200);
    /* gris claro */
    --accent-teal: #d4d4d4;
    /* gris claro suave */

    /* ===== ACENTOS CON OPACIDAD ===== */
    --accent-cyan-10: rgba(200, 200, 200, 0.1);
    --accent-cyan-20: rgba(200, 200, 200, 0.2);
    --accent-cyan-30: rgba(200, 200, 200, 0.3);
    --accent-cyan-primary-5: rgba(229, 229, 229, 0.05);
    --accent-cyan-primary-10: rgba(229, 229, 229, 0.1);
    --accent-cyan-primary-30: rgba(229, 229, 229, 0.3);
    --accent-cyan-500-10: rgba(200, 200, 200, 0.1);
    --accent-cyan-500-20: rgba(200, 200, 200, 0.2);
    --accent-cyan-500-50: rgba(200, 200, 200, 0.5);
    --blue-500-10: rgba(140, 140, 140, 0.1);

    /* ===== COLORES DE TEXTO ===== */
    --text-primary: #e5e5e5;
    /* gris muy claro */
    --text-white: #ffffff;
    /* blanco puro */
    --text-light: rgb(212, 212, 212);
    /* gris claro */
    --text-muted: rgb(163, 163, 163);
    /* gris medio */
    --text-subtle: rgb(115, 115, 115);
    /* gris medio-oscuro */

    /* ===== PATRÓN DE PUNTOS ===== */
    --grid-dot-color: #ffffff;
    /* blanco para los puntos del grid */

    /* ===== OVERLAYS Y SOMBRAS ===== */
    --overlay-dark: rgba(0, 0, 0, 0.75);
    --overlay-darker: rgba(0, 0, 0, 0.95);
    --shadow-cyan-soft: rgba(200, 200, 200, 0.1);
    --shadow-cyan-medium: rgba(200, 200, 200, 0.2);

    /* ===== GRADIENTES (para usar con CSS) ===== */
    --gradient-bg: linear-gradient(to bottom right, var(--bg-primary), var(--bg-secondary), var(--bg-tertiary));
    --gradient-text: linear-gradient(to right, var(--text-white), var(--text-light));
    --gradient-cyan: radial-gradient(circle, rgba(229, 229, 229, 0.1) 0%, rgba(229, 229, 229, 0) 100%);
    --gradient-teal: radial-gradient(circle, rgba(212, 212, 212, 0.1) 0%, rgba(212, 212, 212, 0) 100%);
    --gradient-overlay: linear-gradient(to top, var(--surface-dark), transparent);

    /* ===== ESTADOS INTERACTIVOS ===== */
    --hover-cyan-bg: rgba(77, 77, 77, 0.3);
    /* gris medio-oscuro */
    --hover-cyan-bg-light: rgba(77, 77, 77, 0.2);
    /* gris medio-oscuro claro */
    --hover-blue-bg: rgba(64, 64, 64, 0.2);
    /* gris medio */
}

/* ===== COLORS: WHITE THEME ===== */
[data-theme='white'] {
    /* ===== FONDOS PRINCIPALES ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f2f5;
  
    /* ===== FONDOS CON OPACIDAD ===== */
    --bg-navbar: rgba(248, 249, 250, 0.95);
    --bg-navbar-transparent: rgba(248, 249, 250, 0.85);
    --bg-card: rgba(248, 249, 250, 0.6);
    --bg-hover-soft: rgba(248, 249, 250, 0.95);
  
    /* ===== ELEMENTOS DE SUPERFICIE ===== */
    --surface-dark: rgb(240, 242, 245); /* gris muy claro */
    --surface-medium: rgb(229, 231, 235); /* gris claro */
    --surface-light: rgb(209, 213, 219); /* gris medio-claro */
    --surface-tag: rgba(229, 231, 235, 0.5); /* gris claro con transparencia */
  
    /* ===== BORDES ===== */
    --border-primary: rgb(229, 231, 235); /* gris claro */
    --border-primary-50: rgba(229, 231, 235, 0.5); /* gris claro 50% */
    --border-secondary: rgb(209, 213, 219); /* gris medio-claro */
    --border-soft: #e5e7eb;
    --border-blue-soft: rgba(209, 213, 219, 0.3); /* gris medio-claro transparente */
    --border-cyan: rgb(156, 163, 175); /* gris medio */
    --border-cyan-dark: rgb(107, 114, 128); /* gris medio-oscuro */
  
    /* ===== ACENTOS (GRISES Y NEGROS) ===== */
    --accent-cyan-primary: #1a1a1a; /* gris muy oscuro (casi negro) */
    --accent-cyan-light: #2d2d2d; /* gris oscuro */
    --accent-cyan-500: rgb(75, 85, 99); /* gris medio-oscuro */
    --accent-teal: #374151; /* gris medio */
  
    /* ===== ACENTOS CON OPACIDAD ===== */
    --accent-cyan-10: rgba(75, 85, 99, 0.1);
    --accent-cyan-20: rgba(75, 85, 99, 0.2);
    --accent-cyan-30: rgba(75, 85, 99, 0.3);
    --accent-cyan-primary-5: rgba(26, 26, 26, 0.05);
    --accent-cyan-primary-10: rgba(26, 26, 26, 0.1);
    --accent-cyan-primary-30: rgba(26, 26, 26, 0.3);
    --accent-cyan-500-10: rgba(75, 85, 99, 0.1);
    --accent-cyan-500-20: rgba(75, 85, 99, 0.2);
    --accent-cyan-500-50: rgba(75, 85, 99, 0.5);
    --blue-500-10: rgba(107, 114, 128, 0.1);
  
    /* ===== COLORES DE TEXTO ===== */
    --text-primary: #1a1a1a; /* gris muy oscuro */
    --text-white: #000000; /* negro (invertido del blanco original) */
    --text-light: rgb(55, 65, 81); /* gris oscuro */
    --text-muted: rgb(107, 114, 128); /* gris medio */
    --text-subtle: rgb(156, 163, 175); /* gris medio-claro */
  
    /* ===== PATRÓN DE PUNTOS ===== */
    --grid-dot-color: #000000; /* gris claro para los puntos del grid */
  
    /* ===== OVERLAYS Y SOMBRAS ===== */
    --overlay-dark: rgba(255, 255, 255, 0.75);
    --overlay-darker: rgba(255, 255, 255, 0.95);
    --shadow-cyan-soft: rgba(75, 85, 99, 0.1);
    --shadow-cyan-medium: rgba(75, 85, 99, 0.2);
  
    /* ===== GRADIENTES (para usar con CSS) ===== */
    --gradient-bg: linear-gradient(to bottom right, var(--bg-primary), var(--bg-secondary), var(--bg-tertiary));
    --gradient-text: linear-gradient(to right, var(--text-white), var(--text-light));
    --gradient-cyan: radial-gradient(circle, rgba(26, 26, 26, 0.05) 0%, rgba(26, 26, 26, 0) 100%);
    --gradient-teal: radial-gradient(circle, rgba(55, 65, 81, 0.05) 0%, rgba(55, 65, 81, 0) 100%);
    --gradient-overlay: linear-gradient(to top, var(--surface-dark), transparent);
  
    /* ===== ESTADOS INTERACTIVOS ===== */
    --hover-cyan-bg: rgba(107, 114, 128, 0.1); /* gris medio-oscuro claro */
    --hover-cyan-bg-light: rgba(107, 114, 128, 0.08); /* gris medio-oscuro muy claro */
    --hover-blue-bg: rgba(156, 163, 175, 0.1); /* gris medio */
}

/* ===== CLASES DE UTILIDAD PARA TAILWIND ===== */
.bg-primary {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

.bg-card {
    background-color: var(--bg-card);
}

.text-primary {
    color: var(--text-primary);
}

.text-white {
    color: var(--text-white);
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.border-primary {
    border-color: var(--border-primary);
}

.border-secondary {
    border-color: var(--border-secondary);
}

.accent-cyan {
    color: var(--accent-cyan-primary);
}

.accent-teal {
    color: var(--accent-teal);
}