/**
 * tokens.css — el sistema de diseño de SocialVideoHub 7.0.
 *
 * ══════════════════════════════════════════════════════════════════════════
 *  TRES NIVELES, NO UNO NI DOS
 *
 *   1 · PRIMITIVOS   — la paleta cruda, sin significado. `--svh-morado-500`.
 *   2 · SEMÁNTICOS   — para QUÉ sirve, no QUÉ color es. `--svh-fondo`.
 *                      **Esta capa la usa el 95 % del CSS.**
 *   3 · DE COMPONENTE — solo excepciones, dentro de su propia clase.
 *
 *  POR QUÉ TRES: el modo oscuro se resuelve **redefiniendo solo el nivel 2**,
 *  sin tocar una sola regla. Eso mata de raíz las dos deudas de la versión
 *  vieja: «colores repartidos por 5 CSS» y «dos modos oscuros distintos».
 *  Un solo modo oscuro. Un solo sitio con colores.
 *
 *  ⚠️ TODOS ESTOS COLORES ESTÁN COMPROBADOS CONTRA WCAG 2.2 AA con
 *  `contraste.py` ANTES de aprobarse. El rediseño anterior se revirtió por
 *  quedar ilegible, y la causa fue no comprobar el contraste. Aquí no se
 *  añade ni un color sin pasar por ahí.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════
 * CÓMO SE LE GANA A WOODMART SIN UN SOLO `!important`
 *
 * El plan era usar capas de cascada (`@layer`) y envolver Woodmart en una
 * capa `vendor`. **No funciona, y conviene saber por qué**: la única forma
 * de meter una hoja externa en una capa sin descargarla dos veces sería el
 * atributo `<link rel="stylesheet" layer="vendor">`, y **ningún navegador lo
 * soporta** (está en el borrador de la especificación, sin implementar).
 *
 * Y aquí está la trampa: en CSS, **lo que NO está en ninguna capa gana a
 * todo lo que sí lo está**. Así que envolver solo nuestro CSS en `@layer`
 * era justo lo contrario de lo que queríamos: hacía que Woodmart ganara
 * siempre. Se probó en el navegador y por eso se ve.
 *
 * Lo que SÍ funciona, y es más simple: nuestro CSS **sin capa** y encolado
 * **después** del de Woodmart. A igual especificidad gana el último, y el
 * último somos nosotros. Cero `!important`, que era el objetivo de verdad.
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 * NIVEL 1 · PRIMITIVOS — la paleta cruda. Nadie los usa directamente.
 * ═══════════════════════════════════════════════════════════════════ */

:root {

	/* ── Marca ─────────────────────────────────────────────────── */
	--svh-morado-50:  #F5F3FF;
	--svh-morado-100: #EDE9FE;
	--svh-morado-200: #DDD6FE;
	--svh-morado-500: #7C3AED;
	--svh-morado-600: #6D28D9;
	--svh-morado-700: #5B21B6;
	--svh-morado-900: #2E1065;

	/* ── Neutros ───────────────────────────────────────────────── */
	--svh-gris-0:   #FFFFFF;
	--svh-gris-50:  #F9FAFB;
	--svh-gris-100: #F3F4F6;
	--svh-gris-200: #E5E7EB;
	--svh-gris-300: #D1D5DB;
	--svh-gris-400: #8B93A1;   /* 3,09:1 sobre blanco — el mínimo que pasa 1.4.11 */
	--svh-gris-500: #6B7280;
	--svh-gris-600: #4B5563;
	--svh-gris-700: #374151;
	--svh-gris-800: #1F2937;
	--svh-gris-900: #111827;
	--svh-gris-950: #0B0B0F;

	/* ── Estados (el semáforo del panel) ───────────────────────── */
	/* Ojo: estos NO son los verdes/rojos «bonitos» de Tailwind. Son los
	   tonos que pasan 3:1 sobre blanco. Un #10B981 se ve precioso y da
	   2,5:1 — o sea, ilegible para mucha gente. */
	--svh-verde-500: #047857;
	--svh-verde-50:  #ECFDF5;
	--svh-azul-500:  #1D4ED8;
	--svh-azul-50:   #EFF6FF;
	--svh-ambar-500: #B45309;
	--svh-ambar-50:  #FFFBEB;
	--svh-rojo-500:  #DC2626;
	--svh-rojo-50:   #FEF2F2;

	/* ── Espaciado: escala de 4 px, y solo esta ────────────────── */
	/* Un `px` suelto en una revisión es un fallo, no una licencia. */
	--svh-espacio-1:  0.25rem;
	--svh-espacio-2:  0.5rem;
	--svh-espacio-3:  0.75rem;
	--svh-espacio-4:  1rem;
	--svh-espacio-6:  1.5rem;
	--svh-espacio-8:  2rem;
	--svh-espacio-12: 3rem;
	--svh-espacio-16: 4rem;
	--svh-espacio-24: 6rem;

	/* ── Radios ────────────────────────────────────────────────── */
	--svh-radio-sm:   6px;
	--svh-radio-md:   12px;
	--svh-radio-lg:   20px;
	--svh-radio-full: 999px;

	/* ── Tipografía ────────────────────────────────────────────── */
	/* Autoalojada por RGPD: ni una llamada a Google Fonts. */
	--svh-fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--svh-fuente-numero: 'Inter', system-ui, sans-serif;

	--svh-txt-micro: 0.8125rem;   /* origen y fecha del dato */
	--svh-txt-cuerpo: 1rem;
	--svh-txt-titulo: 1.5rem;
	--svh-txt-h1: 2.25rem;
	--svh-txt-h1-movil: 1.75rem;
	--svh-txt-numero: 2.5rem;     /* el alcance total del creador */

	--svh-alto-linea: 1.6;
	--svh-alto-linea-titulo: 1.25;

	/* ── Sombras ───────────────────────────────────────────────── */
	--svh-sombra-sm: 0 1px 2px rgb(0 0 0 / 0.05);
	--svh-sombra-md: 0 4px 12px rgb(0 0 0 / 0.08);
	--svh-sombra-lg: 0 12px 32px rgb(0 0 0 / 0.12);

	/* ── Movimiento ────────────────────────────────────────────── */
	--svh-transicion: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════
 * NIVEL 2 · SEMÁNTICOS — lo que usa el 95 % del CSS.
 *
 * Aquí es donde se cambia el aspecto de toda la web. Ninguna regla de
 * componente conoce un color primitivo: solo estos.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
	--svh-fondo:            var(--svh-gris-0);
	--svh-fondo-tarjeta:    var(--svh-gris-0);
	--svh-fondo-suave:      var(--svh-gris-50);
	--svh-fondo-hundido:    var(--svh-gris-100);

	--svh-texto:            var(--svh-gris-950);
	--svh-texto-suave:      var(--svh-gris-600);
	--svh-texto-tenue:      var(--svh-gris-500);

	--svh-marca:            var(--svh-morado-600);
	--svh-marca-hover:      var(--svh-morado-700);
	--svh-marca-suave:      var(--svh-morado-50);
	--svh-marca-texto:      var(--svh-gris-0);

	/* Dos bordes, y la diferencia importa:
	   · `--svh-borde` delimita CAMPOS Y CONTROLES → obligado 3:1 (WCAG 1.4.11).
	     Un #D1D5DB queda precioso y da 1,47:1: invisible para mucha gente.
	   · `--svh-borde-suave` es decorativo (separadores) → sin obligación. */
	--svh-borde:            var(--svh-gris-400);
	--svh-borde-suave:      var(--svh-gris-200);
	--svh-foco:             var(--svh-morado-600);

	/* El semáforo del panel: el color se decide UNA vez, aquí. */
	--svh-estado-ok:        var(--svh-verde-500);
	--svh-estado-ok-fondo:  var(--svh-verde-50);
	--svh-estado-curso:     var(--svh-azul-500);
	--svh-estado-curso-fondo: var(--svh-azul-50);
	--svh-estado-avisa:     var(--svh-ambar-500);
	--svh-estado-avisa-fondo: var(--svh-ambar-50);
	--svh-estado-error:     var(--svh-rojo-500);
	--svh-estado-error-fondo: var(--svh-rojo-50);
	/* «Aún no disponible» es GRIS, nunca rojo: no es culpa del usuario
	   y no hay nada que pueda arreglar. */
	--svh-estado-inactivo:  var(--svh-gris-500);

	--svh-sombra-tarjeta:   var(--svh-sombra-sm);
	--svh-sombra-flotante:  var(--svh-sombra-lg);
}

/* ═══════════════════════════════════════════════════════════════════
 * MODO OSCURO — solo se redefine el nivel 2. Ni una regla cambia.
 *
 * Tres estados, como manda el navegador:
 *   · sin elegir  → lo que diga el sistema (`prefers-color-scheme`)
 *   · elegido     → `data-tema` gana siempre, en los dos sentidos
 * ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--svh-fondo:            var(--svh-gris-950);
		--svh-fondo-tarjeta:    #16161C;
		--svh-fondo-suave:      #101016;
		--svh-fondo-hundido:    #0A0A0E;

		--svh-texto:            var(--svh-gris-0);
		--svh-texto-suave:      var(--svh-gris-300);
		--svh-texto-tenue:      #9CA3AF;

		/* En oscuro el morado 600 no llega a 3:1: se sube a 200. */
		--svh-marca:            var(--svh-morado-200);
		--svh-marca-hover:      var(--svh-morado-100);
		--svh-marca-suave:      #1E1B34;
		--svh-marca-texto:      var(--svh-gris-950);

		--svh-borde:            #6B6B7D;   /* 3,76:1 sobre el fondo oscuro */
		--svh-borde-suave:      #2A2A33;
		--svh-foco:             var(--svh-morado-200);

		/* Los tonos del semáforo también cambian: los oscuros no se ven
		   sobre negro. Comprobados igual que los claros. */
		--svh-estado-ok:        #34D399;
		--svh-estado-ok-fondo:  #052E22;
		--svh-estado-curso:     #93C5FD;
		--svh-estado-curso-fondo: #0B1E3D;
		--svh-estado-avisa:     #FCD34D;
		--svh-estado-avisa-fondo: #2E1F05;
		--svh-estado-error:     #FCA5A5;
		--svh-estado-error-fondo: #2E0B0B;
		--svh-estado-inactivo:  #9CA3AF;

		--svh-sombra-tarjeta:   0 1px 2px rgb(0 0 0 / 0.5);
		--svh-sombra-flotante:  0 12px 32px rgb(0 0 0 / 0.6);
	}
}

/* El interruptor manual gana en los dos sentidos. */
:root[data-tema="oscuro"] {
	--svh-fondo:            var(--svh-gris-950);
	--svh-fondo-tarjeta:    #16161C;
	--svh-fondo-suave:      #101016;
	--svh-fondo-hundido:    #0A0A0E;

	--svh-texto:            var(--svh-gris-0);
	--svh-texto-suave:      var(--svh-gris-300);
	--svh-texto-tenue:      #9CA3AF;

	--svh-marca:            var(--svh-morado-200);
	--svh-marca-hover:      var(--svh-morado-100);
	--svh-marca-suave:      #1E1B34;
	--svh-marca-texto:      var(--svh-gris-950);

	--svh-borde:            #6B6B7D;   /* 3,76:1 sobre el fondo oscuro */
	--svh-borde-suave:      #2A2A33;
	--svh-foco:             var(--svh-morado-200);

	--svh-estado-ok:        #34D399;
	--svh-estado-ok-fondo:  #052E22;
	--svh-estado-curso:     #93C5FD;
	--svh-estado-curso-fondo: #0B1E3D;
	--svh-estado-avisa:     #FCD34D;
	--svh-estado-avisa-fondo: #2E1F05;
	--svh-estado-error:     #FCA5A5;
	--svh-estado-error-fondo: #2E0B0B;
	--svh-estado-inactivo:  #9CA3AF;

	--svh-sombra-tarjeta:   0 1px 2px rgb(0 0 0 / 0.5);
	--svh-sombra-flotante:  0 12px 32px rgb(0 0 0 / 0.6);
}