/* ========== CSS VARIABLES ========== */
:root {
    /* ========== COLOR PALETTE ========== */
    /* Primary Colors */
    --color-primary: #5BB947;
    --color-light-primary: #74C463;
    --color-primary-dark: #5bb800;
    --color-primary-darker: #4fa700;
    --color-primary-light: #F0F9EE;
    --color-primary-lighter: #D8F0D3;
    --color-primary-shadow: #e6f8ee;
    --color-info: #0064B2;
    /* Neutral Colors */
    --color-black: #000000;
    --color-dark: #1F2937;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #313131;
    --color-text-tertiary: #595959;
    --color-text-quaternary: #8a8a8a;
    --color-text-light: #808080;
    --color-text-disabled: #bebebe;
    --color-white: #fff;
    --color-off-white: #fafafa;
    /* Form specific colors */
    --color-form-label: #57534e;
    /* Background Colors */
    --color-bg-main: #fff;
    --color-bg-secondary: #F2F2F2;
    --color-bg-tertiary: #D8D8D8;
    --color-bg-quaternary: #f5f5f5;
    --color-bg-hover: #F9FAFB;
    --color-bg-card: #F3F4F6;
    --color-bg-warning: #F2A356;
    --color-bg-success: #61C478;
    --color-medium-grey: #e5e5e5;
    /* Border Colors */
    --color-border-primary: #E5E7EB;
    --color-border-secondary: #f2f2f2;
    --color-border-tertiary: #d8d8d8;
    --color-border-quaternary: #e9e9e9;
    --color-border-light: #EDEFFA;
    --color-border-medium: #e5e5e5;
    /* Status Colors */
    --color-status-active-bg: #cae4fd;
    --color-status-active-text: #0f85f8;
    --color-error: #d61600;
    --color-success: #58ba47;
    --color-btn-close: #d61600;
    --color-rose-pink: #E79E99;
    --color-periwinkle-purple: #6F69C2;
    --color-sky-blue: #158AFF;
    /* Gradient Colors */
    --gradient-brand: linear-gradient(to right, #000001, #01e1a2);
    --gradient-user-card: linear-gradient(135deg, #0D4A2C 0%, #0A3821 100%);
    /* Table Colors */
    --color-table-header: #F2F2F2;
    /* Dual-Listbox Colors */
    --color-dlb-hover: #D8F0D3;
    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.2);
    --color-overlay-dark: rgba(0, 0, 0, 0.3);
    --color-scrollbar: rgba(0, 0, 0, 0.3);
    --color-scrollbar-hover: rgba(0, 0, 0, 0.5);
    /* ========== SPACING ========== */
    --spacing-xs: 4px;
    --spacing-s: 6px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 80px;
    /* ========== BORDER RADIUS ========== */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 10000px;
    --radius-circle: 50%;
    --radius-special: 392.638px;
    /* ========== TYPOGRAPHY ========== */
    --font-primary: 'Sarabun';
    --font-secondary: 'DB Helvethaica X', 'Poppins', sans-serif;
    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 38px;
    --font-size-brand: 20px;
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Letter Spacing */
    --letter-spacing-default: 0.01em;
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.25;
    --line-height-normal: 1.3;
    --line-height-relaxed: 1.4;
    --line-height-loose: 20px;
    --line-height-xloose: 24px;
    /* ========== DIMENSIONS ========== */
    --sidebar-width: 250px;
    --panel-width: 712px;
    --panel-width-lg: 952px;
    --modal-width-xxl: 952px;
    --modal-width-xl: 718px;
    --modal-width-lg: 712px;
    --modal-width-md: 538px;
    --filter-modal-width-lg: 686px;
    --filter-modal-width-xl: 924px;
    --filter-modal-height-lg: 622px;
    /* Heights */
    --icon-sm: 7px;
    --icon-md: 10px;
    --icon-lg: 12px;
    --icon-xl: 14px;
    --icon-2xl: 16px;
    --icon-3xl: 24px;
    --icon-4xl: 28px;
    --icon-5xl: 31px;
    --avatar-sm: 30px;
    --button-sm: 24px;
    --button-md: 25px;
    --button-lg: 32px;
    --button-xl: 38px;
    /* ========== SPACING (Size-Based) ========== */
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-9: 9px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-80: 80px;
    /* ========== NEGATIVE SPACING ========== */
    --spacing-n2: -2px;
    --spacing-n4: -4px;
    --spacing-n6: -6px;
    --spacing-n8: -8px;
    --spacing-n10: -10px;
    --spacing-n12: -12px;
    --spacing-n16: -16px;
    --spacing-n20: -20px;
    --spacing-n24: -24px;
    --spacing-n30: -30px;
    --spacing-n32: -32px;
    --spacing-n40: -40px;
    --spacing-n80: -80px;
    /* ========== BORDER RADIUS (Size-Based) ========== */
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-full: 10000px;
    --radius-circle: 50%;
    --radius-393: 392.638px;
    /* ========== FONT SIZES (Size-Based) ========== */
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-38: 38px;
    /* ========== FONT WEIGHTS (Size-Based) ========== */
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    /* ========== LETTER SPACING (Size-Based) ========== */
    --letter-spacing-0-01: 0.01em;
    /* ========== LINE HEIGHTS (Size-Based) ========== */
    --line-height-1-2: 1.2;
    --line-height-1-25: 1.25;
    --line-height-1-3: 1.3;
    --line-height-1-4: 1.4;
    --line-height-20: 20px;
    --line-height-22: 22px;
    --line-height-30: 30px;
    /* ========== DIMENSIONS (Size-Based) ========== */
    --width-240: 240px;
    --width-538: 538px;
    --width-712: 712px;
    /* ========== ICONS (Size-Based) ========== */
    --icon-7: 7px;
    --icon-10: 10px;
    --icon-12: 12px;
    --icon-14: 14px;
    --icon-16: 16px;
    --icon-28: 28px;
    /* ========== AVATARS & BUTTONS (Size-Based) ========== */
    --avatar-30: 30px;
    --button-24: 24px;
    --button-25: 25px;
    --button-32: 32px;
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-md: -4px 0 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: -4px 0 24px rgba(0, 0, 0, 0.1);
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --transition-all: all 0.2s;
    --transition-ease: ease;
    /* ========== Z-INDEX ========== */
    --z-sticky: 5;
    --z-header: 8;
    --z-tabs: 9;
    --z-footer: 10;
    --z-sidebar-overlay: 99;
    --z-sidebar: 100;
    --z-dropdown: 100;
    --z-sidebar-top: 999;
    --z-overlay: 1000;
    --z-modal: 1001;
    --z-filter-overlay: 2000;
    --z-filter-modal: 2001;
    --z-modal-stack-1: 1010;
    --z-overlay-stack-2: 1059;
    --z-modal-stack-2: 1060;
    /* ========== SCROLLBAR ========== */
    --scrollbar-width: 6px;
    /* ========== BREAKPOINTS ========== */
    --breakpoint-mobile: 600px;
    --breakpoint-tablet: 1024px;
    /* ========== THEME TRANSITION ========== */
    --theme-transition-duration: 1s;
    /* ========== BADGE ========== */
    --color-status-active-bg: #5EC26A;
    --color-status-active-text: #FFFFFF;
    --color-status-inactive-bg: #D8D8D8;
    --color-status-inactive-text: #8A8A8A;
    --color-secondary-badge-bg: #F2F2F2;
    --color-secondary-badge-text: #313131;
    --select-size-md: 40px;
}