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

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

.#{$prefix}theme-centurion {
	// ── Capa 1: Primitivos (paleta) ──────────────────────────────────────────────

	// Blue — brand principal (acción, links, foco)
	--#{$prefix}color-blue-950: #001640;
	--#{$prefix}color-blue-900: #002265;
	--#{$prefix}color-blue-800: #003498;
	--#{$prefix}color-blue-700: #0046d5;
	--#{$prefix}color-blue-600: #1a5ce0;
	--#{$prefix}color-blue-500: #3472eb;
	--#{$prefix}color-blue-400: #5a8ef5;
	--#{$prefix}color-blue-300: #88aff8;
	--#{$prefix}color-blue-200: #b8d0fb;
	--#{$prefix}color-blue-100: #dce8fd;
	--#{$prefix}color-blue-50:  #f0f5ff;

	// Navy — superficies oscuras (header, sidebar, panel headers)
	--#{$prefix}color-navy-950: #05101f;
	--#{$prefix}color-navy-900: #0c1f3d;
	--#{$prefix}color-navy-800: #152b50;
	--#{$prefix}color-navy-700: #1e3a69;
	--#{$prefix}color-navy-600: #274c85;

	// Slate — texto y fondos neutros de UI
	--#{$prefix}color-slate-950: #020617;
	--#{$prefix}color-slate-900: #0f172a;
	--#{$prefix}color-slate-800: #1e293b;
	--#{$prefix}color-slate-700: #334155;
	--#{$prefix}color-slate-600: #475569;
	--#{$prefix}color-slate-500: #64748b;
	--#{$prefix}color-slate-400: #94a3b8;
	--#{$prefix}color-slate-300: #cbd5e1;
	--#{$prefix}color-slate-200: #e2e8f0;
	--#{$prefix}color-slate-100: #f1f5f9;
	--#{$prefix}color-slate-50:  #f8fafc;

	// Gray — elementos cromados, bordes, superficies neutras
	--#{$prefix}color-gray-600: #4b5563;
	--#{$prefix}color-gray-500: #6b7280;
	--#{$prefix}color-gray-400: #9ca3af;
	--#{$prefix}color-gray-300: #d1d5db;
	--#{$prefix}color-gray-200: #e5e7eb;
	--#{$prefix}color-gray-100: #f3f4f6;
	--#{$prefix}color-gray-50:  #f9fafb;

	// Green — success
	--#{$prefix}color-green-900: #052e16;
	--#{$prefix}color-green-800: #145321;
	--#{$prefix}color-green-700: #1a6b2a;
	--#{$prefix}color-green-600: #16a34a;

	// Teal — info
	--#{$prefix}color-teal-900: #0b2d4a;
	--#{$prefix}color-teal-800: #0f3d66;
	--#{$prefix}color-teal-700: #1a5a8a;
	--#{$prefix}color-teal-600: #0369a1;

	// Amber — warning
	--#{$prefix}color-amber-800: #5c4400;
	--#{$prefix}color-amber-600: #d97706;
	--#{$prefix}color-amber-400: #ffbc00;
	--#{$prefix}color-amber-300: #fcd34d;

	// Red — danger
	--#{$prefix}color-red-900: #450a0a;
	--#{$prefix}color-red-800: #8b1a1a;
	--#{$prefix}color-red-700: #a51f1f;
	--#{$prefix}color-red-600: #dc2626;

	// ── Capa 2: Semánticos (referencian primitivos) ──────────────────────────────
	--#{$prefix}primary-rgb: 0 70 213;
	--#{$prefix}secondary-rgb: 71 85 105;
	--#{$prefix}success-rgb: 26 107 42;
	--#{$prefix}info-rgb: 26 90 138;
	--#{$prefix}warning-rgb: 255 188 0;
	--#{$prefix}danger-rgb: 139 26 26;
	--#{$prefix}black-rgb: 0 0 0;
	--#{$prefix}white-rgb: 255 255 255;

	// Colores de acción
	--#{$prefix}primary-color: var(--#{$prefix}color-blue-700);
	--#{$prefix}primary-dark-color: var(--#{$prefix}color-blue-800);
	--#{$prefix}primary-light-color: var(--#{$prefix}color-blue-100);
	--#{$prefix}secondary-color: var(--#{$prefix}color-slate-600);
	--#{$prefix}secondary-dark-color: var(--#{$prefix}color-slate-900);
	--#{$prefix}success-color: var(--#{$prefix}color-green-700);
	--#{$prefix}success-dark-color: var(--#{$prefix}color-green-800);
	--#{$prefix}info-color: var(--#{$prefix}color-teal-700);
	--#{$prefix}info-dark-color: var(--#{$prefix}color-teal-800);
	--#{$prefix}warning-color: var(--#{$prefix}color-amber-400);
	--#{$prefix}warning-dark-color: var(--#{$prefix}color-amber-800);
	--#{$prefix}warning-on-color: var(--#{$prefix}black-color);
	--#{$prefix}danger-color: var(--#{$prefix}color-red-800);
	--#{$prefix}danger-dark-color: var(--#{$prefix}color-red-900);
	--#{$prefix}black-color: #000;
	--#{$prefix}white-color: #fff;

	// Jerarquía de texto
	--#{$prefix}title-color: #111827;
	--#{$prefix}subtitle-color: var(--#{$prefix}color-slate-500);
	--#{$prefix}body-color: var(--#{$prefix}color-slate-700);
	--#{$prefix}muted-color: var(--#{$prefix}color-slate-400);
	--#{$prefix}link-color: var(--#{$prefix}color-blue-700);
	--#{$prefix}link-hover-color: var(--#{$prefix}color-blue-800);

	// Bordes
	--#{$prefix}border-color: #c8cdd4;
	--#{$prefix}border-color-strong: var(--#{$prefix}color-slate-300);
	--#{$prefix}border-color-subtle: var(--#{$prefix}color-gray-200);

	// Superficies
	--#{$prefix}surface-base: #ffffff;
	--#{$prefix}surface-raised: var(--#{$prefix}color-slate-50);
	--#{$prefix}surface-overlay: var(--#{$prefix}color-gray-50);

	// Acciones
	--#{$prefix}primary-action-color: var(--#{$prefix}primary-color);
	--#{$prefix}secondary-action-color: var(--#{$prefix}color-slate-600);

	--#{$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);
}