/* =============================================================
 * Trinocex — design tokens (OKLCH)
 *
 * Capas:
 *   1. PRIMITIVE   — colores crudos de la paleta, no se usan directos
 *   2. SEMANTIC    — bg, text, accent, border... el contrato del theme
 *   3. COMPONENT   — overrides puntuales por componente (futuro)
 *
 * Cambiar la skin del sitio = tocar la capa SEMANTIC. La PRIMITIVE
 * vive en el [data-theme] root y flipea claro/oscuro.
 * ============================================================= */

:root {
	/* ---------- PRIMITIVE (oscuro por defecto) ---------- */
	--trx-c-ink-0:       oklch(14% 0.018 254);   /* near-black */
	--trx-c-ink-1:       oklch(18% 0.020 254);
	--trx-c-ink-2:       oklch(22% 0.022 254);
	--trx-c-ink-3:       oklch(28% 0.024 254);
	--trx-c-ink-4:       oklch(38% 0.024 254);

	--trx-c-paper-0:     oklch(97% 0.006 252);   /* near-white */
	--trx-c-paper-1:     oklch(88% 0.012 252);
	--trx-c-paper-2:     oklch(72% 0.020 252);
	--trx-c-paper-3:     oklch(56% 0.024 252);

	--trx-c-cyan:        oklch(72% 0.18 230);
	--trx-c-teal:        oklch(78% 0.15 195);
	--trx-c-violet:      oklch(68% 0.20 285);
	--trx-c-amber:       oklch(78% 0.16 75);
	--trx-c-green:       oklch(74% 0.16 152);
	--trx-c-red:         oklch(64% 0.22 27);

	/* ---------- SEMANTIC ---------- */
	--trx-bg:            var(--trx-c-ink-0);
	--trx-surface:       var(--trx-c-ink-1);
	--trx-surface-2:     var(--trx-c-ink-2);
	--trx-border:        var(--trx-c-ink-3);
	--trx-border-strong: var(--trx-c-ink-4);

	--trx-text:          var(--trx-c-paper-0);
	--trx-text-muted:    var(--trx-c-paper-2);
	--trx-text-faint:    var(--trx-c-paper-3);

	--trx-accent:        var(--trx-c-cyan);
	--trx-accent-2:      var(--trx-c-teal);
	--trx-accent-3:      var(--trx-c-violet);
	--trx-on-accent:     var(--trx-c-paper-0);   /* SIEMPRE claro sobre acentos saturados */

	--trx-success:       var(--trx-c-green);
	--trx-warning:       var(--trx-c-amber);
	--trx-danger:        var(--trx-c-red);

	/* ---------- ESCALAS ---------- */
	--trx-radius-xs:     4px;
	--trx-radius-sm:     8px;
	--trx-radius-md:     12px;
	--trx-radius-lg:     20px;
	--trx-radius-pill:   999px;

	--trx-space-1:       0.25rem;
	--trx-space-2:       0.5rem;
	--trx-space-3:       0.75rem;
	--trx-space-4:       1rem;
	--trx-space-5:       1.5rem;
	--trx-space-6:       2rem;
	--trx-space-7:       3rem;
	--trx-space-8:       4rem;
	--trx-space-9:       6rem;
	--trx-space-10:      8rem;

	--trx-shadow-sm:     0 1px 2px oklch(0% 0 0 / 0.20);
	--trx-shadow-md:     0 6px 24px oklch(0% 0 0 / 0.25);
	--trx-shadow-lg:     0 20px 60px oklch(0% 0 0 / 0.35);

	--trx-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--trx-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
	--trx-dur-fast:      150ms;
	--trx-dur-base:      280ms;
	--trx-dur-slow:      560ms;

	--trx-container:     1200px;
	--trx-content:       72ch;

	/* Anillo de focus accesible (uniforme) */
	--trx-ring:          0 0 0 3px oklch(72% 0.18 230 / 0.45);

	color-scheme: dark;
}

/* ---------- Tema claro: solo cambia la capa SEMANTIC y la PRIMITIVE de inks ---------- */
[data-theme="light"] {
	--trx-bg:            var(--trx-c-paper-0);
	--trx-surface:       oklch(94% 0.008 252);
	--trx-surface-2:     oklch(88% 0.010 252);
	--trx-border:        oklch(78% 0.014 252);
	--trx-border-strong: oklch(60% 0.018 252);

	--trx-text:          oklch(14% 0.018 254);
	--trx-text-muted:    oklch(38% 0.022 254);
	--trx-text-faint:    oklch(56% 0.022 254);

	color-scheme: light;
}

/* Sistema sigue al SO si el usuario no ha forzado tema */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--trx-bg:            var(--trx-c-paper-0);
		--trx-surface:       oklch(94% 0.008 252);
		--trx-surface-2:     oklch(88% 0.010 252);
		--trx-border:        oklch(78% 0.014 252);
		--trx-border-strong: oklch(60% 0.018 252);
		--trx-text:          oklch(14% 0.018 254);
		--trx-text-muted:    oklch(38% 0.022 254);
		--trx-text-faint:    oklch(56% 0.022 254);
		color-scheme: light;
	}
}