:root {
	/* ===================================
	LIWE3 THEME SYSTEM - DIV LEVEL DARK/LIGHT MODE SUPPORT
	================================== */

	/*====================================
	BASE VALUES
	====================================*/
	--liwe3-main-font-family: Ubuntu, sans-serif;
	--liwe3-font-family: var(--liwe3-main-font-family);
	--liwe3-secondary-font-family: Secondary;
	--liwe3-font-weight: 400;
	--liwe3-font-size: 20px;
	--liwe3-border-width: 1px;
	--liwe3-border-radius: 3px;

	/* ===================================
	 BASE COLOR VARIABLES
	 Define your 4 main colors here (light and dark modes)
	 ================================== */
	--liwe3-light-mode1: oklch(0.65 0.2 220);
	--liwe3-light-mode2: oklch(0.6 0.15 160);
	--liwe3-light-mode3: oklch(0.55 0.18 30);
	--liwe3-light-mode4: oklch(0.65 0.25 320);
	--liwe3-light-color: oklch(22.804% 0.04031 227.035);
	--liwe3-light-background: oklch(0.98 0.02 230);

	--liwe3-light-warning: oklch(74.149% 0.17988 54.436);
	--liwe3-light-error: oklch(0.65 0.25 30);
	--liwe3-light-success: oklch(49.368% 0.11693 248.097);

	--liwe3-dark-mode1: oklch(0.2 0.15 220);
	--liwe3-dark-mode2: oklch(0.25 0.1 160);
	--liwe3-dark-mode3: oklch(0.3 0.12 30);
	--liwe3-dark-mode4: oklch(0.15 0.2 320);
	--liwe3-dark-color: oklch(93.58% 0.00263 230.354);
	--liwe3-dark-background: oklch(0.1 0.1 0.1);

	--liwe3-dark-warning: oklch(50.0% 0.15 54.436);
	--liwe3-dark-error: oklch(0.2 0.25 30);
	--liwe3-dark-success: oklch(49.368% 0.11693 248.097);

	/* ===================================
	 LIGHT MODE COLOR PALETTES
	 ================================== */
	--liwe3-light-mode1-50: oklch(from var(--liwe3-light-mode1) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-light-mode1-100: oklch(from var(--liwe3-light-mode1) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-light-mode1-200: oklch(from var(--liwe3-light-mode1) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-light-mode1-300: oklch(from var(--liwe3-light-mode1) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-light-mode1-400: oklch(from var(--liwe3-light-mode1) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-light-mode1-500: var(--liwe3-light-mode1);
	--liwe3-light-mode1-600: oklch(from var(--liwe3-light-mode1) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-light-mode1-700: oklch(from var(--liwe3-light-mode1) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-light-mode1-800: oklch(from var(--liwe3-light-mode1) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-light-mode1-900: oklch(from var(--liwe3-light-mode1) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-light-mode1-950: oklch(from var(--liwe3-light-mode1) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-light-mode2-50: oklch(from var(--liwe3-light-mode2) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-light-mode2-100: oklch(from var(--liwe3-light-mode2) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-light-mode2-200: oklch(from var(--liwe3-light-mode2) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-light-mode2-300: oklch(from var(--liwe3-light-mode2) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-light-mode2-400: oklch(from var(--liwe3-light-mode2) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-light-mode2-500: var(--liwe3-light-mode2);
	--liwe3-light-mode2-600: oklch(from var(--liwe3-light-mode2) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-light-mode2-700: oklch(from var(--liwe3-light-mode2) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-light-mode2-800: oklch(from var(--liwe3-light-mode2) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-light-mode2-900: oklch(from var(--liwe3-light-mode2) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-light-mode2-950: oklch(from var(--liwe3-light-mode2) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-light-mode3-50: oklch(from var(--liwe3-light-mode3) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-light-mode3-100: oklch(from var(--liwe3-light-mode3) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-light-mode3-200: oklch(from var(--liwe3-light-mode3) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-light-mode3-300: oklch(from var(--liwe3-light-mode3) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-light-mode3-400: oklch(from var(--liwe3-light-mode3) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-light-mode3-500: var(--liwe3-light-mode3);
	--liwe3-light-mode3-600: oklch(from var(--liwe3-light-mode3) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-light-mode3-700: oklch(from var(--liwe3-light-mode3) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-light-mode3-800: oklch(from var(--liwe3-light-mode3) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-light-mode3-900: oklch(from var(--liwe3-light-mode3) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-light-mode3-950: oklch(from var(--liwe3-light-mode3) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-light-mode4-50: oklch(from var(--liwe3-light-mode4) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-light-mode4-100: oklch(from var(--liwe3-light-mode4) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-light-mode4-200: oklch(from var(--liwe3-light-mode4) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-light-mode4-300: oklch(from var(--liwe3-light-mode4) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-light-mode4-400: oklch(from var(--liwe3-light-mode4) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-light-mode4-500: var(--liwe3-light-mode4);
	--liwe3-light-mode4-600: oklch(from var(--liwe3-light-mode4) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-light-mode4-700: oklch(from var(--liwe3-light-mode4) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-light-mode4-800: oklch(from var(--liwe3-light-mode4) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-light-mode4-900: oklch(from var(--liwe3-light-mode4) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-light-mode4-950: oklch(from var(--liwe3-light-mode4) calc(l - 0.45) calc(c * 0.7) h);

	/* ===================================
	 DARK MODE COLOR PALETTES
	 ================================== */
	--liwe3-dark-mode1-50: oklch(from var(--liwe3-dark-mode1) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-dark-mode1-100: oklch(from var(--liwe3-dark-mode1) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-dark-mode1-200: oklch(from var(--liwe3-dark-mode1) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-dark-mode1-300: oklch(from var(--liwe3-dark-mode1) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-dark-mode1-400: oklch(from var(--liwe3-dark-mode1) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-dark-mode1-500: var(--liwe3-dark-mode1);
	--liwe3-dark-mode1-600: oklch(from var(--liwe3-dark-mode1) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-dark-mode1-700: oklch(from var(--liwe3-dark-mode1) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-dark-mode1-800: oklch(from var(--liwe3-dark-mode1) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-dark-mode1-900: oklch(from var(--liwe3-dark-mode1) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-dark-mode1-950: oklch(from var(--liwe3-dark-mode1) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-dark-mode2-50: oklch(from var(--liwe3-dark-mode2) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-dark-mode2-100: oklch(from var(--liwe3-dark-mode2) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-dark-mode2-200: oklch(from var(--liwe3-dark-mode2) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-dark-mode2-300: oklch(from var(--liwe3-dark-mode2) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-dark-mode2-400: oklch(from var(--liwe3-dark-mode2) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-dark-mode2-500: var(--liwe3-dark-mode2);
	--liwe3-dark-mode2-600: oklch(from var(--liwe3-dark-mode2) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-dark-mode2-700: oklch(from var(--liwe3-dark-mode2) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-dark-mode2-800: oklch(from var(--liwe3-dark-mode2) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-dark-mode2-900: oklch(from var(--liwe3-dark-mode2) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-dark-mode2-950: oklch(from var(--liwe3-dark-mode2) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-dark-mode3-50: oklch(from var(--liwe3-dark-mode3) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-dark-mode3-100: oklch(from var(--liwe3-dark-mode3) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-dark-mode3-200: oklch(from var(--liwe3-dark-mode3) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-dark-mode3-300: oklch(from var(--liwe3-dark-mode3) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-dark-mode3-400: oklch(from var(--liwe3-dark-mode3) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-dark-mode3-500: var(--liwe3-dark-mode3);
	--liwe3-dark-mode3-600: oklch(from var(--liwe3-dark-mode3) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-dark-mode3-700: oklch(from var(--liwe3-dark-mode3) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-dark-mode3-800: oklch(from var(--liwe3-dark-mode3) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-dark-mode3-900: oklch(from var(--liwe3-dark-mode3) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-dark-mode3-950: oklch(from var(--liwe3-dark-mode3) calc(l - 0.45) calc(c * 0.7) h);

	--liwe3-dark-mode4-50: oklch(from var(--liwe3-dark-mode4) calc(l + 0.35) calc(c * 0.3) h);
	--liwe3-dark-mode4-100: oklch(from var(--liwe3-dark-mode4) calc(l + 0.3) calc(c * 0.4) h);
	--liwe3-dark-mode4-200: oklch(from var(--liwe3-dark-mode4) calc(l + 0.25) calc(c * 0.6) h);
	--liwe3-dark-mode4-300: oklch(from var(--liwe3-dark-mode4) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-dark-mode4-400: oklch(from var(--liwe3-dark-mode4) calc(l + 0.1) calc(c * 0.85) h);
	--liwe3-dark-mode4-500: var(--liwe3-dark-mode4);
	--liwe3-dark-mode4-600: oklch(from var(--liwe3-dark-mode4) calc(l - 0.1) calc(c * 1.1) h);
	--liwe3-dark-mode4-700: oklch(from var(--liwe3-dark-mode4) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-dark-mode4-800: oklch(from var(--liwe3-dark-mode4) calc(l - 0.3) calc(c * 1.1) h);
	--liwe3-dark-mode4-900: oklch(from var(--liwe3-dark-mode4) calc(l - 0.4) calc(c * 0.9) h);
	--liwe3-dark-mode4-950: oklch(from var(--liwe3-dark-mode4) calc(l - 0.45) calc(c * 0.7) h);

	/* ===================================
	 LIGHT GRAY SCALE (derived from mode1)
	 ================================== */
	--liwe3-light-gray-50: oklch(from var(--liwe3-light-mode1) 0.97 calc(c * 0.05) h);
	--liwe3-light-gray-100: oklch(from var(--liwe3-light-mode1) 0.94 calc(c * 0.08) h);
	--liwe3-light-gray-200: oklch(from var(--liwe3-light-mode1) 0.89 calc(c * 0.1) h);
	--liwe3-light-gray-300: oklch(from var(--liwe3-light-mode1) 0.83 calc(c * 0.12) h);
	--liwe3-light-gray-400: oklch(from var(--liwe3-light-mode1) 0.68 calc(c * 0.15) h);
	--liwe3-light-gray-500: oklch(from var(--liwe3-light-mode1) 0.55 calc(c * 0.18) h);
	--liwe3-light-gray-600: oklch(from var(--liwe3-light-mode1) 0.45 calc(c * 0.15) h);
	--liwe3-light-gray-700: oklch(from var(--liwe3-light-mode1) 0.35 calc(c * 0.12) h);
	--liwe3-light-gray-800: oklch(from var(--liwe3-light-mode1) 0.25 calc(c * 0.1) h);
	--liwe3-light-gray-850: oklch(from var(--liwe3-light-mode1) 0.12 calc(c * 0.06) h);
	--liwe3-light-gray-900: oklch(from var(--liwe3-light-mode1) 0.15 calc(c * 0.08) h);
	--liwe3-light-gray-950: oklch(from var(--liwe3-light-mode1) 0.08 calc(c * 0.05) h);

	/* ===================================
	 DARK GRAY SCALE (derived from dark mode1)
	 ================================== */
	--liwe3-dark-gray-50: oklch(from var(--liwe3-dark-mode1) 0.95 calc(c * 0.05) h);
	--liwe3-dark-gray-100: oklch(from var(--liwe3-dark-mode1) 0.92 calc(c * 0.08) h);
	--liwe3-dark-gray-200: oklch(from var(--liwe3-dark-mode1) 0.87 calc(c * 0.1) h);
	--liwe3-dark-gray-300: oklch(from var(--liwe3-dark-mode1) 0.81 calc(c * 0.12) h);
	--liwe3-dark-gray-400: oklch(from var(--liwe3-dark-mode1) 0.66 calc(c * 0.15) h);
	--liwe3-dark-gray-500: oklch(from var(--liwe3-dark-mode1) 0.53 calc(c * 0.18) h);
	--liwe3-dark-gray-600: oklch(from var(--liwe3-dark-mode1) 0.43 calc(c * 0.15) h);
	--liwe3-dark-gray-700: oklch(from var(--liwe3-dark-mode1) 0.33 calc(c * 0.12) h);
	--liwe3-dark-gray-800: oklch(from var(--liwe3-dark-mode1) 0.23 calc(c * 0.1) h);
	--liwe3-dark-gray-850: oklch(from var(--liwe3-dark-mode1) 0.18 calc(c * 0.08) h);
	--liwe3-dark-gray-900: oklch(from var(--liwe3-dark-mode1) 0.13 calc(c * 0.06) h);
	--liwe3-dark-gray-950: oklch(from var(--liwe3-dark-mode1) 0.06 calc(c * 0.03) h);

	/* ===================================
	 BUTTON VARIABLES
	 ================================== */
	--liwe3-button-border-size: 2px;
	--liwe3-light-button-border-mode1: var(--liwe3-light-mode1-500);
	--liwe3-light-button-border-mode2: var(--liwe3-light-mode2-500);
	--liwe3-light-button-border-mode3: var(--liwe3-light-mode3-500);
	--liwe3-light-button-border-mode4: var(--liwe3-light-mode4-500);
	--liwe3-dark-button-border-mode1: var(--liwe3-dark-mode1-500);
	--liwe3-dark-button-border-mode2: var(--liwe3-dark-mode2-500);
	--liwe3-dark-button-border-mode3: var(--liwe3-dark-mode3-500);
	--liwe3-dark-button-border-mode4: var(--liwe3-dark-mode4-500);
}

/* ===================================
   DEFAULT LIGHT MODE & GLOBAL STYLES
   ================================== */
:root,
[data-theme="light"],
:root:not([data-theme]) {
	--liwe3-color: var(--liwe3-light-color);
	--liwe3-background: var(--liwe3-light-background);
	--liwe3-color-mode1: var(--liwe3-light-mode1);
	--liwe3-color-mode2: var(--liwe3-light-mode2);
	--liwe3-color-mode3: var(--liwe3-light-mode3);
	--liwe3-color-mode4: var(--liwe3-light-mode4);
	--liwe3-success: var(--liwe3-light-success);
	--liwe3-warning: var(--liwe3-light-warning);
	--liwe3-error: var(--liwe3-light-error);
	--liwe3-mode1-50: var(--liwe3-light-mode1-50);
	--liwe3-mode1-100: var(--liwe3-light-mode1-100);
	--liwe3-mode1-200: var(--liwe3-light-mode1-200);
	--liwe3-mode1-300: var(--liwe3-light-mode1-300);
	--liwe3-mode1-400: var(--liwe3-light-mode1-400);
	--liwe3-mode1-500: var(--liwe3-light-mode1-500);
	--liwe3-mode1-600: var(--liwe3-light-mode1-600);
	--liwe3-mode1-700: var(--liwe3-light-mode1-700);
	--liwe3-mode1-800: var(--liwe3-light-mode1-800);
	--liwe3-mode1-900: var(--liwe3-light-mode1-900);
	--liwe3-mode1-950: var(--liwe3-light-mode1-950);
	--liwe3-mode2-50: var(--liwe3-light-mode2-50);
	--liwe3-mode2-100: var(--liwe3-light-mode2-100);
	--liwe3-mode2-200: var(--liwe3-light-mode2-200);
	--liwe3-mode2-300: var(--liwe3-light-mode2-300);
	--liwe3-mode2-400: var(--liwe3-light-mode2-400);
	--liwe3-mode2-500: var(--liwe3-light-mode2-500);
	--liwe3-mode2-600: var(--liwe3-light-mode2-600);
	--liwe3-mode2-700: var(--liwe3-light-mode2-700);
	--liwe3-mode2-800: var(--liwe3-light-mode2-800);
	--liwe3-mode2-900: var(--liwe3-light-mode2-900);
	--liwe3-mode2-950: var(--liwe3-light-mode2-950);
	--liwe3-mode3-50: var(--liwe3-light-mode3-50);
	--liwe3-mode3-100: var(--liwe3-light-mode3-100);
	--liwe3-mode3-200: var(--liwe3-light-mode3-200);
	--liwe3-mode3-300: var(--liwe3-light-mode3-300);
	--liwe3-mode3-400: var(--liwe3-light-mode3-400);
	--liwe3-mode3-500: var(--liwe3-light-mode3-500);
	--liwe3-mode3-600: var(--liwe3-light-mode3-600);
	--liwe3-mode3-700: var(--liwe3-light-mode3-700);
	--liwe3-mode3-800: var(--liwe3-light-mode3-800);
	--liwe3-mode3-900: var(--liwe3-light-mode3-900);
	--liwe3-mode3-950: var(--liwe3-light-mode3-950);
	--liwe3-mode4-50: var(--liwe3-light-mode4-50);
	--liwe3-mode4-100: var(--liwe3-light-mode4-100);
	--liwe3-mode4-200: var(--liwe3-light-mode4-200);
	--liwe3-mode4-300: var(--liwe3-light-mode4-300);
	--liwe3-mode4-400: var(--liwe3-light-mode4-400);
	--liwe3-mode4-500: var(--liwe3-light-mode4-500);
	--liwe3-mode4-600: var(--liwe3-light-mode4-600);
	--liwe3-mode4-700: var(--liwe3-light-mode4-700);
	--liwe3-mode4-800: var(--liwe3-light-mode4-800);
	--liwe3-mode4-900: var(--liwe3-light-mode4-900);
	--liwe3-mode4-950: var(--liwe3-light-mode4-950);
	--liwe3-gray-50: var(--liwe3-light-gray-50);
	--liwe3-gray-100: var(--liwe3-light-gray-100);
	--liwe3-gray-200: var(--liwe3-light-gray-200);
	--liwe3-gray-300: var(--liwe3-light-gray-300);
	--liwe3-gray-400: var(--liwe3-light-gray-400);
	--liwe3-gray-500: var(--liwe3-light-gray-500);
	--liwe3-gray-600: var(--liwe3-light-gray-600);
	--liwe3-gray-700: var(--liwe3-light-gray-700);
	--liwe3-gray-800: var(--liwe3-light-gray-800);
	--liwe3-gray-850: var(--liwe3-light-gray-850);
	--liwe3-gray-900: var(--liwe3-light-gray-900);
	--liwe3-gray-950: var(--liwe3-light-gray-950);
	--liwe3-surface-mode1: var(--liwe3-gray-50);
	--liwe3-surface-mode2: var(--liwe3-gray-100);
	--liwe3-surface-mode3: var(--liwe3-gray-200);
	--liwe3-surface-raised: oklch(1 0 0);
	--liwe3-surface-overlay: oklch(from var(--liwe3-gray-900) l c h / 0.8);
	--liwe3-text-mode1: var(--liwe3-gray-900);
	--liwe3-text-mode2: var(--liwe3-gray-700);
	--liwe3-text-mode3: var(--liwe3-gray-500);
	--liwe3-text-disabled: var(--liwe3-gray-400);
	--liwe3-text-inverse: oklch(1 0 0);
	--liwe3-border-subtle: var(--liwe3-gray-200);
	--liwe3-border-default: var(--liwe3-gray-300);
	--liwe3-border-strong: var(--liwe3-gray-400);
	--liwe3-hover-overlay: oklch(from var(--liwe3-color-mode1) l c h / 0.08);
	--liwe3-active-overlay: oklch(from var(--liwe3-color-mode1) l c h / 0.12);
	--liwe3-focus-ring: oklch(from var(--liwe3-color-mode1) l c h / 0.5);
	--liwe3-info: var(--liwe3-mode1-500);
	--liwe3-info-light: var(--liwe3-mode1-300);
	--liwe3-info-dark: var(--liwe3-mode1-700);
	--liwe3-button-border-color: var(--liwe3-border-default);
	--liwe3-button-border-mode1: var(--liwe3-light-button-border-mode1);
	--liwe3-button-border-mode2: var(--liwe3-light-button-border-mode2);
	--liwe3-button-border-mode3: var(--liwe3-light-button-border-mode3);
	--liwe3-button-border-mode4: var(--liwe3-light-button-border-mode4);

	/* ===================================
	SEMANTIC COLORS
	================================== */
	--liwe3-success: var(--liwe3-light-success);
	--liwe3-warning: var(--liwe3-light-warning);
	--liwe3-error: var(--liwe3-light-error);
}

/* ===================================
   DARK MODE OVERRIDES
   ================================== */
[data-theme="dark"] {
	--liwe3-color: var(--liwe3-dark-color);
	--liwe3-background: var(--liwe3-dark-background);
	--liwe3-color-mode1: var(--liwe3-dark-mode1);
	--liwe3-color-mode2: var(--liwe3-dark-mode2);
	--liwe3-color-mode3: var(--liwe3-dark-mode3);
	--liwe3-color-mode4: var(--liwe3-dark-mode4);
	--liwe3-success: var(--liwe3-dark-success);
	--liwe3-warning: var(--liwe3-dark-warning);
	--liwe3-error: var(--liwe3-dark-error);
	--liwe3-mode1-50: var(--liwe3-dark-mode1-50);
	--liwe3-mode1-100: var(--liwe3-dark-mode1-100);
	--liwe3-mode1-200: var(--liwe3-dark-mode1-200);
	--liwe3-mode1-300: var(--liwe3-dark-mode1-300);
	--liwe3-mode1-400: var(--liwe3-dark-mode1-400);
	--liwe3-mode1-500: var(--liwe3-dark-mode1-500);
	--liwe3-mode1-600: var(--liwe3-dark-mode1-600);
	--liwe3-mode1-700: var(--liwe3-dark-mode1-700);
	--liwe3-mode1-800: var(--liwe3-dark-mode1-800);
	--liwe3-mode1-900: var(--liwe3-dark-mode1-900);
	--liwe3-mode1-950: var(--liwe3-dark-mode1-950);
	--liwe3-mode2-50: var(--liwe3-dark-mode2-50);
	--liwe3-mode2-100: var(--liwe3-dark-mode2-100);
	--liwe3-mode2-200: var(--liwe3-dark-mode2-200);
	--liwe3-mode2-300: var(--liwe3-dark-mode2-300);
	--liwe3-mode2-400: var(--liwe3-dark-mode2-400);
	--liwe3-mode2-500: var(--liwe3-dark-mode2-500);
	--liwe3-mode2-600: var(--liwe3-dark-mode2-600);
	--liwe3-mode2-700: var(--liwe3-dark-mode2-700);
	--liwe3-mode2-800: var(--liwe3-dark-mode2-800);
	--liwe3-mode2-900: var(--liwe3-dark-mode2-900);
	--liwe3-mode2-950: var(--liwe3-dark-mode2-950);
	--liwe3-mode3-50: var(--liwe3-dark-mode3-50);
	--liwe3-mode3-100: var(--liwe3-dark-mode3-100);
	--liwe3-mode3-200: var(--liwe3-dark-mode3-200);
	--liwe3-mode3-300: var(--liwe3-dark-mode3-300);
	--liwe3-mode3-400: var(--liwe3-dark-mode3-400);
	--liwe3-mode3-500: var(--liwe3-dark-mode3-500);
	--liwe3-mode3-600: var(--liwe3-dark-mode3-600);
	--liwe3-mode3-700: var(--liwe3-dark-mode3-700);
	--liwe3-mode3-800: var(--liwe3-dark-mode3-800);
	--liwe3-mode3-900: var(--liwe3-dark-mode3-900);
	--liwe3-mode3-950: var(--liwe3-dark-mode3-950);
	--liwe3-mode4-50: var(--liwe3-dark-mode4-50);
	--liwe3-mode4-100: var(--liwe3-dark-mode4-100);
	--liwe3-mode4-200: var(--liwe3-dark-mode4-200);
	--liwe3-mode4-300: var(--liwe3-dark-mode4-300);
	--liwe3-mode4-400: var(--liwe3-dark-mode4-400);
	--liwe3-mode4-500: var(--liwe3-dark-mode4-500);
	--liwe3-mode4-600: var(--liwe3-dark-mode4-600);
	--liwe3-mode4-700: var(--liwe3-dark-mode4-700);
	--liwe3-mode4-800: var(--liwe3-dark-mode4-800);
	--liwe3-mode4-900: var(--liwe3-dark-mode4-900);
	--liwe3-mode4-950: var(--liwe3-dark-mode4-950);
	--liwe3-gray-50: var(--liwe3-dark-gray-50);
	--liwe3-gray-100: var(--liwe3-dark-gray-100);
	--liwe3-gray-200: var(--liwe3-dark-gray-200);
	--liwe3-gray-300: var(--liwe3-dark-gray-300);
	--liwe3-gray-400: var(--liwe3-dark-gray-400);
	--liwe3-gray-500: var(--liwe3-dark-gray-500);
	--liwe3-gray-600: var(--liwe3-dark-gray-600);
	--liwe3-gray-700: var(--liwe3-dark-gray-700);
	--liwe3-gray-800: var(--liwe3-dark-gray-800);
	--liwe3-gray-850: var(--liwe3-dark-gray-850);
	--liwe3-gray-900: var(--liwe3-dark-gray-900);
	--liwe3-gray-950: var(--liwe3-dark-gray-950);
	--liwe3-surface-mode1: var(--liwe3-gray-900);
	--liwe3-surface-mode2: var(--liwe3-gray-800);
	--liwe3-surface-mode3: var(--liwe3-gray-700);
	--liwe3-surface-raised: var(--liwe3-gray-850);
	--liwe3-text-mode1: var(--liwe3-gray-50);
	--liwe3-text-mode2: var(--liwe3-gray-300);
	--liwe3-text-mode3: var(--liwe3-gray-400);
	--liwe3-text-disabled: var(--liwe3-gray-600);
	--liwe3-text-inverse: oklch(1 0 0);
	--liwe3-border-subtle: var(--liwe3-gray-700);
	--liwe3-border-default: var(--liwe3-gray-600);
	--liwe3-border-strong: var(--liwe3-gray-500);
	--liwe3-button-border-color: var(--liwe3-border-default);
	--liwe3-button-border-mode1: var(--liwe3-dark-button-border-mode1);
	--liwe3-button-border-mode2: var(--liwe3-dark-button-border-mode2);
	--liwe3-button-border-mode3: var(--liwe3-dark-button-border-mode3);
	--liwe3-button-border-mode4: var(--liwe3-dark-button-border-mode4);

	/* ===================================
	    SEMANTIC COLORS
	    ================================== */
	--liwe3-success: var(--liwe3-dark-success);
	--liwe3-warning: var(--liwe3-dark-warning);
	--liwe3-error: var(--liwe3-dark-error);
}

/* ===================================
   BUTTON GRADIENT CUSTOM PROPERTIES
   ================================== */
:root {
	/* Mode button gradients */
	--btn-gradient-mode1: linear-gradient(135deg, var(--liwe3-mode1-600), var(--liwe3-mode1-700));
	--btn-gradient-mode1-hover: linear-gradient(135deg, var(--liwe3-mode1-400), var(--liwe3-mode1-800));
	--btn-gradient-mode1-active: linear-gradient(135deg, var(--liwe3-mode1-600), var(--liwe3-mode1-700));

	--btn-gradient-mode2: linear-gradient(135deg, var(--liwe3-mode2-600), var(--liwe3-mode2-700));
	--btn-gradient-mode2-hover: linear-gradient(135deg, var(--liwe3-mode2-400), var(--liwe3-mode2-800));
	--btn-gradient-mode2-active: linear-gradient(135deg, var(--liwe3-mode2-600), var(--liwe3-mode2-800));

	--btn-gradient-mode3: linear-gradient(135deg, var(--liwe3-mode3-600), var(--liwe3-mode3-700));
	--btn-gradient-mode3-hover: linear-gradient(135deg, var(--liwe3-mode3-400), var(--liwe3-mode3-800));
	--btn-gradient-mode3-active: linear-gradient(135deg, var(--liwe3-mode3-600), var(--liwe3-mode3-800));

	--btn-gradient-mode4: linear-gradient(135deg, var(--liwe3-mode4-600), var(--liwe3-mode4-700));
	--btn-gradient-mode4-hover: linear-gradient(135deg, var(--liwe3-mode4-400), var(--liwe3-mode4-800));
	--btn-gradient-mode4-active: linear-gradient(135deg, var(--liwe3-mode4-600), var(--liwe3-mode4-800));

	/* Status button gradients */
	--btn-gradient-success: linear-gradient(135deg, var(--liwe3-success), var(--liwe3-success-dark));
	--btn-gradient-success-hover: linear-gradient(135deg, oklch(from var(--liwe3-success) calc(l - 0.05) c h), var(--liwe3-success-dark));
	--btn-gradient-success-active: linear-gradient(135deg, var(--liwe3-success-dark), oklch(from var(--liwe3-success-dark) calc(l - 0.1) c h));

	--btn-gradient-warning: linear-gradient(135deg, var(--liwe3-warning), var(--liwe3-warning-dark));
	--btn-gradient-warning-hover: linear-gradient(135deg, oklch(from var(--liwe3-warning) calc(l - 0.05) c h), var(--liwe3-warning-dark));
	--btn-gradient-warning-active: linear-gradient(135deg, var(--liwe3-warning-dark), oklch(from var(--liwe3-warning-dark) calc(l - 0.1) c h));

	--btn-gradient-error: linear-gradient(135deg, var(--liwe3-error), var(--liwe3-error-dark));
	--btn-gradient-error-hover: linear-gradient(135deg, oklch(from var(--liwe3-error) calc(l - 0.05) c h), var(--liwe3-error-dark));
	--btn-gradient-error-active: linear-gradient(135deg, var(--liwe3-error-dark), oklch(from var(--liwe3-error-dark) calc(l - 0.1) c h));

	--btn-gradient-info: linear-gradient(135deg, var(--liwe3-info), var(--liwe3-info-dark));
	--btn-gradient-info-hover: linear-gradient(135deg, oklch(from var(--liwe3-info) calc(l - 0.05) c h), var(--liwe3-info-dark));
	--btn-gradient-info-active: linear-gradient(135deg, var(--liwe3-info-dark), oklch(from var(--liwe3-info-dark) calc(l - 0.1) c h));
}

/* Dark mode gradient overrides */
[data-theme="dark"] {
	--btn-gradient-mode1-hover: linear-gradient(135deg, var(--liwe3-mode1-300), var(--liwe3-mode1-500));
	--btn-gradient-mode1-active: linear-gradient(135deg, var(--liwe3-mode1-500), var(--liwe3-mode1-700));

	--btn-gradient-mode2-hover: linear-gradient(135deg, var(--liwe3-mode2-300), var(--liwe3-mode2-500));
	--btn-gradient-mode2-active: linear-gradient(135deg, var(--liwe3-mode2-500), var(--liwe3-mode2-700));

	--btn-gradient-mode3-hover: linear-gradient(135deg, var(--liwe3-mode3-300), var(--liwe3-mode3-500));
	--btn-gradient-mode3-active: linear-gradient(135deg, var(--liwe3-mode3-500), var(--liwe3-mode3-700));

	--btn-gradient-mode4-hover: linear-gradient(135deg, var(--liwe3-mode4-300), var(--liwe3-mode4-500));
	--btn-gradient-mode4-active: linear-gradient(135deg, var(--liwe3-mode4-500), var(--liwe3-mode4-700));

	--btn-gradient-success: linear-gradient(135deg, oklch(from var(--liwe3-success) calc(l - 0.1) c h), var(--liwe3-success));
	--btn-gradient-success-hover: linear-gradient(135deg, oklch(from var(--liwe3-success) calc(l - 0.05) c h), var(--liwe3-success));
	--btn-gradient-success-active: linear-gradient(135deg, var(--liwe3-success), var(--liwe3-success-dark));

	--btn-gradient-warning: linear-gradient(135deg, oklch(from var(--liwe3-warning) calc(l - 0.1) c h), var(--liwe3-warning));
	--btn-gradient-warning-hover: linear-gradient(135deg, oklch(from var(--liwe3-warning) calc(l - 0.05) c h), var(--liwe3-warning));
	--btn-gradient-warning-active: linear-gradient(135deg, var(--liwe3-warning), var(--liwe3-warning-dark));

	--btn-gradient-error: linear-gradient(135deg, oklch(from var(--liwe3-error) calc(l - 0.1) c h), var(--liwe3-error));
	--btn-gradient-error-hover: linear-gradient(135deg, oklch(from var(--liwe3-error) calc(l - 0.05) c h), var(--liwe3-error));
	--btn-gradient-error-active: linear-gradient(135deg, var(--liwe3-error), var(--liwe3-error-dark));

	--btn-gradient-info: linear-gradient(135deg, oklch(from var(--liwe3-info) calc(l - 0.1) c h), var(--liwe3-info));
	--btn-gradient-info-hover: linear-gradient(135deg, oklch(from var(--liwe3-info) calc(l - 0.05) c h), var(--liwe3-info));
	--btn-gradient-info-active: linear-gradient(135deg, var(--liwe3-info), var(--liwe3-info-dark));
}

:root {
	--liwe3-success-light: oklch(from var(--liwe3-success) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-success-dark: oklch(from var(--liwe3-success) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-warning-light: oklch(from var(--liwe3-warning) calc(l + 0.15) calc(c * 0.7) h);
	--liwe3-warning-dark: oklch(from var(--liwe3-warning) calc(l - 0.2) calc(c * 1.2) h);
	--liwe3-error-light: oklch(from var(--liwe3-error) calc(l + 0.2) calc(c * 0.7) h);
	--liwe3-error-dark: oklch(from var(--liwe3-error) calc(l - 0.2) calc(c * 1.2) h);
}

body {
	width: 100%;
	background-color: var(--liwe3-background);
	font-family: var(--liwe3-font-family);
	font-size: var(--liwe3-font-size);
	font-weight: var(--liwe3-font-weight);
	color: var(--liwe3-color);
}

/* BROWSER RESET RULES */
* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

input,
select,
textarea,
button {
	outline: none;
	border: none;
	font: inherit;
}

/* end reset rules */
html {
	position: relative;
	width: 100%;
	font-size: var(--liwe3-font-size);
}