/* * Fichero: dark.css * Descripción: Sobrescribe las variables de color de variables.css para el Tema Oscuro. * Activación: Se aplica cuando tiene el atributo data-theme="dark". */ [data-theme="dark"] { /* -- Colores Base -- */ --ptk-color-bg: #070a10; /* Fondo más oscuro */ --ptk-color-surface: #0e141b; /* Superficie principal (casi negra, alto contraste) */ --ptk-color-surface-2: #121a23; /* Superficie secundaria (ligeramente más clara) */ --ptk-color-text: #eef2f8; /* Texto muy claro */ --ptk-color-text-muted: #98a2b3; /* Texto secundario (gris claro) */ /* -- Colores Brand -- */ --ptk-color-primary: #5ea2ff; /* Azul más vibrante para Dark Mode */ --ptk-color-primary-600: #4b86d4; --ptk-color-primary-700: #3e6fb0; --ptk-color-accent: #4fe0d1; /* Teal más vibrante */ /* -- Bordes y Estados -- */ --ptk-color-border: #233041; /* Bordes sutiles y oscuros */ --ptk-color-border-strong: #334559; /* Bordes más marcados */ --ptk-color-focus: #9fc2ff; /* Anillo de foco más claro */ /* El resto de tokens (tipografía, espacios, sombras, motion) permanecen inalterados */ /* Para mantener las sombras discretas en dark mode */ --ptk-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3); --ptk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --ptk-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5); }