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

    /*====================================
    BASE VALUES
    ====================================*/
    --liwe3-main-font-family: Primary;
    --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);
}