:root {
	/* ===== COLORS (Base) ===== */
	--color-primary: hsl(220, 80%, 50%);
	--color-error: hsl(0, 80%, 50%);
	--color-warning: hsl(45, 100%, 50%);
	--color-caution: hsl(30, 80%, 50%);
	--color-success: hsl(120, 80%, 50%);
	--color-accent: hsl(200, 80%, 50%);
	--color-muted: hsl(210, 10%, 50%);
	--color-highlighted: hsl(220, 80%, 70%);
	--color-text: hsl(0, 0%, 0%);
	--color-bg: hsl(0, 0%, 100%);
	--color-border: hsl(0, 0%, 90%);

	/* ===== LIGHT/DARK MODE ===== */
	--color-text-dark: hsl(0, 0%, 0%);
	--color-text-light: hsl(0, 0%, 100%);
	--color-bg-dark: hsl(0, 0%, 10%);
	--color-bg-light: hsl(0, 0%, 95%);
	--color-border-dark: hsl(0, 0%, 20%);
	--color-border-light: hsl(0, 0%, 90%);

	/* ===== SHADES (Lighten/Darken) ===== */
	--shade-50: oklch(from var(--color-primary) l c h / 0.05);
	--shade-100: oklch(from var(--color-primary) l c h / 0.1);
	--shade-200: oklch(from var(--color-primary) l c h / 0.2);
	--shade-300: oklch(from var(--color-primary) l c h / 0.3);
	--shade-400: oklch(from var(--color-primary) l c h / 0.4);
	--shade-500: oklch(from var(--color-primary) l c h / 0.5);
	--shade-600: oklch(from var(--color-primary) l c h / 0.6);
	--shade-700: oklch(from var(--color-primary) l c h / 0.7);
	--shade-800: oklch(from var(--color-primary) l c h / 0.8);
	--shade-900: oklch(from var(--color-primary) l c h / 0.9);

	/* ===== DARK MODE OVERRIDES ===== */
	--color-text: var(--color-text-light);
	--color-bg: var(--color-bg-dark);
	--color-border: var(--color-border-dark);
}

/* ===== DARK MODE TOGGLE (Optional) ===== */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: var(--color-text-dark);
		--color-bg: var(--color-bg-dark);
		--color-border: var(--color-border-dark);
	}
}

/* ===== UTILITY CLASSES ===== */

/* ===== SPACING ===== */
.margin-0 { margin: 0 !important; }
.margin-1 { margin: 0.25rem !important; }
.margin-2 { margin: 0.5rem !important; }
.margin-3 { margin: 0.75rem !important; }
.margin-4 { margin: 1rem !important; }
.margin-5 { margin: 1.5rem !important; }
.margin-6 { margin: 2rem !important; }
.margin-7 { margin: 3rem !important; }
.margin-8 { margin: 4rem !important; }
.margin-0 { margin: 0 !important; }
.margin-top-1 { margin-top: 0.25rem !important; }
.margin-top-2 { margin-top: 0.5rem !important; }
.margin-top-3 { margin-top: 0.75rem !important; }
.margin-top-4 { margin-top: 1rem !important; }
.margin-top-5 { margin-top: 1.5rem !important; }
.margin-top-6 { margin-top: 2rem !important; }
.margin-top-7 { margin-top: 3rem !important; }
.margin-top-8 { margin-top: 4rem !important; }
.margin-bottom-1 { margin-bottom: 0.25rem !important; }
.margin-bottom-2 { margin-bottom: 0.5rem !important; }
.margin-bottom-3 { margin-bottom: 0.75rem !important; }
.margin-bottom-4 { margin-bottom: 1rem !important; }
.margin-bottom-5 { margin-bottom: 1.5rem !important; }
.margin-bottom-6 { margin-bottom: 2rem !important; }
.margin-bottom-7 { margin-bottom: 3rem !important; }
.margin-bottom-8 { margin-bottom: 4rem !important; }
.margin-left-1 { margin-left: 0.25rem !important; }
.margin-left-2 { margin-left: 0.5rem !important; }
.margin-left-3 { margin-left: 0.75rem !important; }
.margin-left-4 { margin-left: 1rem !important; }
.margin-left-5 { margin-left: 1.5rem !important; }
.margin-left-6 { margin-left: 2rem !important; }
.margin-left-7 { margin-left: 3rem !important; }
.margin-left-8 { margin-left: 4rem !important; }
.margin-right-1 { margin-right: 0.25rem !important; }
.margin-right-2 { margin-right: 0.5rem !important; }
.margin-right-3 { margin-right: 0.75rem !important; }
.margin-right-4 { margin-right: 1rem !important; }
.margin-right-5 { margin-right: 1.5rem !important; }
.margin-right-6 { margin-right: 2rem !important; }
.margin-right-7 { margin-right: 3rem !important; }
.margin-right-8 { margin-right: 4rem !important; }
.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
.margin-x-0 { margin-left: 0 !important; margin-right: 0 !important; }
.margin-x-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.margin-x-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.margin-x-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.margin-x-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.margin-x-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.margin-x-6 { margin-left: 2rem !important; margin-right: 2rem !important; }
.margin-x-7 { margin-left: 3rem !important; margin-right: 3rem !important; }
.margin-x-8 { margin-left: 4rem !important; margin-right: 4rem !important; }
.margin-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-y-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.margin-y-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.margin-y-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.margin-y-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.margin-y-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.margin-y-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.margin-y-7 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.margin-y-8 { margin-top: 4rem !important; margin-bottom: 4rem !important; }


.pad-0 { padding: 0 !important; }
.pad-1 { padding: 0.25rem !important; }
.pad-2 { padding: 0.5rem !important; }
.pad-3 { padding: 0.75rem !important; }
.pad-4 { padding: 1rem !important; }
.pad-5 { padding: 1.5rem !important; }
.pad-6 { padding: 2rem !important; }
.pad-7 { padding: 3rem !important; }
.pad-8 { padding: 4rem !important; }
.pad-0 { padding: 0 !important; }
.pad-top-1 { padding-top: 0.25rem !important; }
.pad-top-2 { padding-top: 0.5rem !important; }
.pad-top-3 { padding-top: 0.75rem !important; }
.pad-top-4 { padding-top: 1rem !important; }
.pad-top-5 { padding-top: 1.5rem !important; }
.pad-top-6 { padding-top: 2rem !important; }
.pad-top-7 { padding-top: 3rem !important; }
.pad-top-8 { padding-top: 4rem !important; }
.pad-bottom-1 { padding-bottom: 0.25rem !important; }
.pad-bottom-2 { padding-bottom: 0.5rem !important; }
.pad-bottom-3 { padding-bottom: 0.75rem !important; }
.pad-bottom-4 { padding-bottom: 1rem !important; }
.pad-bottom-5 { padding-bottom: 1.5rem !important; }
.pad-bottom-6 { padding-bottom: 2rem !important; }
.pad-bottom-7 { padding-bottom: 3rem !important; }
.pad-bottom-8 { padding-bottom: 4rem !important; }
.pad-left-1 { padding-left: 0.25rem !important; }
.pad-left-2 { padding-left: 0.5rem !important; }
.pad-left-3 { padding-left: 0.75rem !important; }
.pad-left-4 { padding-left: 1rem !important; }
.pad-left-5 { padding-left: 1.5rem !important; }
.pad-left-6 { padding-left: 2rem !important; }
.pad-left-7 { padding-left: 3rem !important; }
.pad-left-8 { padding-left: 4rem !important; }
.pad-right-1 { padding-right: 0.25rem !important; }
.pad-right-2 { padding-right: 0.5rem !important; }
.pad-right-3 { padding-right: 0.75rem !important; }
.pad-right-4 { padding-right: 1rem !important; }
.pad-right-5 { padding-right: 1.5rem !important; }
.pad-right-6 { padding-right: 2rem !important; }
.pad-right-7 { padding-right: 3rem !important; }
.pad-right-8 { padding-right: 4rem !important; }
.pad-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pad-x-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.pad-x-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.pad-x-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.pad-x-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.pad-x-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pad-x-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pad-x-7 { padding-left: 3rem !important; padding-right: 3rem !important; }
.pad-x-8 { padding-left: 4rem !important; padding-right: 4rem !important; }
.pad-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pad-y-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.pad-y-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.pad-y-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.pad-y-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pad-y-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.pad-y-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.pad-y-7 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pad-y-8 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

/* ===== BORDERS ===== */
.border { border: 1px solid var(--color-border) !important; }
.border-right { border-right: 1px solid var(--color-border) !important; }
.border-left { border-left: 1px solid var(--color-border) !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }

.border-0 { border: none !important; }

.border-color-primary { border-color: var(--color-primary) !important; }
.border-color-error { border-color: var(--color-error) !important; }
.border-color-warning { border-color: var(--color-warning) !important; }
.border-color-success { border-color: var(--color-success) !important; }
.border-color-accent { border-color: var(--color-accent) !important; }

.border-rounded { border-radius: 0.25rem !important; }
.border-rounded-lg { border-radius: 0.5rem !important; }
.border-rounded-full { border-radius: 9999px !important; }

/* ===== FLEX & GRID ===== */
.align-center { align-content: center !important; }
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-center { justify-content: center !important; align-items: center !important; }
.flex-start { justify-content: flex-start !important; align-items: flex-start !important; }
.flex-end { justify-content: flex-end !important; align-items: flex-end !important; }
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ===== TYPOGRAPHY ===== */
.text-sm { font-size: 0.875rem !important; }
.text-md { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-bold { font-weight: bold !important; }
.text-italic { font-style: italic !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.undecorated { text-decoration: none !important; }

/* ===== COLORS (Background, Text, etc.) ===== */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-50 { background-color: var(--shade-50) !important; }
.bg-primary-100 { background-color: var(--shade-100) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-muted { background-color: var(--color-muted) !important; }
.bg-highlighted { background-color: var(--color-highlighted) !important; }
.bg-transparent { background-color: transparent !important; }

.text-primary { color: var(--color-primary) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-success { color: var(--color-success) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-muted { color: var(--color-muted) !important; }
.text-highlighted { color: var(--color-highlighted) !important; }

/* ===== EFFECTS ===== */
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
.transition { transition: all 0.2s ease-in-out !important; }
.transition-fast { transition: all 0.1s ease-in-out !important; }
.transition-slow { transition: all 0.5s ease-in-out !important; }

/* ===== POSITIONING ===== */
.abs { position: absolute !important; }
.rel { position: relative !important; }
.sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

/* === GENERICS === */
.transparent { opacity: 0 !important; }
.pointer { cursor: pointer !important; }
.hideoverflow { overflow: hidden !important; }

.scroll-x { overflow-x: scroll !important; }
.scroll-y { overflow-y: scroll !important; }

.box-xxs { width: 1rem; height: 1rem; }
.box-xs { width: 2rem; height: 2rem; }
.box-sm { width: 3rem; height: 3rem; }
.box-md { width: 4.5rem; height: 4.5rem; }
.box-lg { width: 6rem; height: 6rem; }
.box-xl { width: 9rem; height: 9rem; }
.box-xxl { width: 12rem; height: 12rem; }

/* === REM WIDTHS === */
.width-0 { width: 0 !important; }
.width-1 { width: 1rem !important; }
.width-2 { width: 2rem !important; }
.width-3 { width: 3rem !important; }
.width-4 { width: 4rem !important; }
.width-5 { width: 5rem !important; }
.width-6 { width: 6rem !important; }
.width-7 { width: 7rem !important; }
.width-8 { width: 8rem !important; }
.width-9 { width: 9rem !important; }
.width-10 { width: 10rem !important; }
.width-11 { width: 11rem !important; }
.width-12 { width: 12rem !important; }
.width-13 { width: 13rem !important; }
.width-14 { width: 14rem !important; }
.width-15 { width: 15rem !important; }
.width-16 { width: 16rem !important; }
.width-20 { width: 20rem !important; }
.width-24 { width: 24rem !important; }
.width-28 { width: 28rem !important; }
.width-32 { width: 32rem !important; }

.width-100 { width: 100% !important; }
.height-100 { height: 100% !important; }