@use '../../variables' as *;

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.#{$prefix}theme-fci {
	// ── Capa 1: Primitivos (paleta) ──────────────────────────────────────────────
	--#{$prefix}color-red-950: #450a0a;
	--#{$prefix}color-red-900: #7f1d1d;
	--#{$prefix}color-red-800: #991b1b;
	--#{$prefix}color-red-700: #b91c1c;
	--#{$prefix}color-red-600: #dc2626;
	--#{$prefix}color-red-500: #ef4444;

	--#{$prefix}color-slate-950: #020617;
	--#{$prefix}color-slate-900: #0f172a;
	--#{$prefix}color-slate-700: #334155;
	--#{$prefix}color-slate-500: #64748b;

	--#{$prefix}color-green-800: #166534;
	--#{$prefix}color-green-700: #15803d;
	--#{$prefix}color-green-600: #16a34a;

	--#{$prefix}color-violet-800: #5b21b6;
	--#{$prefix}color-violet-700: #6d28d9;
	--#{$prefix}color-violet-600: #7c3aed;

	--#{$prefix}color-amber-800: #92400e;
	--#{$prefix}color-amber-600: #d97706;
	--#{$prefix}color-amber-500: #f89406;

	// ── Capa 2: Semánticos (referencian primitivos) ──────────────────────────────
	--#{$prefix}primary-rgb: 153 0 0;
	--#{$prefix}secondary-rgb: 100 116 139;
	--#{$prefix}success-rgb: 22 163 74;
	--#{$prefix}info-rgb: 124 58 237;
	--#{$prefix}warning-rgb: 248 148 6;
	--#{$prefix}danger-rgb: 220 38 38;
	--#{$prefix}black-rgb: 0 0 0;
	--#{$prefix}white-rgb: 255 255 255;

	--#{$prefix}primary-color: var(--#{$prefix}color-red-800);
	--#{$prefix}primary-dark-color: var(--#{$prefix}color-red-900);
	--#{$prefix}secondary-color: var(--#{$prefix}color-slate-500);
	--#{$prefix}secondary-dark-color: var(--#{$prefix}color-slate-900);
	--#{$prefix}success-color: var(--#{$prefix}color-green-600);
	--#{$prefix}success-dark-color: var(--#{$prefix}color-green-800);
	--#{$prefix}info-color: var(--#{$prefix}color-violet-600);
	--#{$prefix}info-dark-color: var(--#{$prefix}color-violet-800);
	--#{$prefix}warning-color: var(--#{$prefix}color-amber-500);
	--#{$prefix}warning-dark-color: var(--#{$prefix}color-amber-800);
	--#{$prefix}warning-on-color: var(--#{$prefix}black-color);
	--#{$prefix}danger-color: var(--#{$prefix}color-red-600);
	--#{$prefix}danger-dark-color: var(--#{$prefix}color-red-800);
	--#{$prefix}black-color: #000;
	--#{$prefix}white-color: #fff;

	--#{$prefix}border-color: rgba(0, 0, 0, 0.12);

	--#{$prefix}title-color: #171717;
	--#{$prefix}subtitle-color: #737373;
	--#{$prefix}body-color: #404040;

	--#{$prefix}primary-action-color: var(--#{$prefix}primary-color);
	--#{$prefix}secondary-action-color: #475569;

	--#{$prefix}font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	--#{$prefix}font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	--#{$prefix}fs-xs: 0.75rem;
	--#{$prefix}fs-sm: 0.875rem;
	--#{$prefix}fs-md: 1rem;
	--#{$prefix}fs-lg: 1.125rem;
	--#{$prefix}fs-xl: 1.25rem;
	--#{$prefix}fs-2xl: 1.5rem;
	--#{$prefix}fs-3xl: 1.75rem;
	--#{$prefix}fs-4xl: 2rem;
	--#{$prefix}fs-5xl: 2.5rem;

	--#{$prefix}shadow-none: none;
	--#{$prefix}shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--#{$prefix}shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--#{$prefix}shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--#{$prefix}shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--#{$prefix}shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}