:root {
    --main-width: 1355px;
    --primary-color: #2563eb;
    --primary-hover: #1454e0;
    --primary-light: #2563eb33;
    --primary-more-light: #2563eb17;
    --primary-dark: #1041ae;
    --primary-more-dark: #061c4a;
    --primary-access: #66adff;

    --bg-primary: #ffffff;
    --bg-secondary: #f1f5fd;
    --bg-tertiary: #e3ebfc;
    --bg-accent: #fcfdfe;
    --bg-modal: rgba(0, 0, 0, 0.326);
    --bg-hover: #f8fafe;
    --bg-active: #dee7fc80;
    --bg-card: #ffffff;

    --text-primary: #14181f;
    --text-secondary: #242b37;
    --text-color: #16233d;
    --text-tertiary: #323b4d;
    --text-muted: #404c63;
    --text-light: #14181f68;
    --text-dark: #14181f;
    --text-white: #ffffff;
    --text-black: #000000;
    --footer-text-color: #F5FAFF;
    --text-placeholder: #404c63;
    --text-placeholder-light: #A0A3BD;

    --border-primary: #b7bdcb;
    --border-secondary: #959fb3;
    --border-light: #b7bdcb55;
    --border-accent: #14181f16;

    --statr-color: #fba707;

    --danger-color: #ff0000;
    --error-mes-color: #ff2942;
    --danger-color-light: #ff2a2a14;

    --green-color: #0dd03e;
    --green-color-light: #0dd03e1f;

    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.15);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --padding-100: 20px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-badge: 50px;
    --radius-full: 50%;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --header-height: 80px;
    --footer-height: 90px;
    --modal-width-mobile: 75%;
    --modal-max-width: 500px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-main: all 0.3s ease;
    --transition-slow: 0.5s ease;
    --z-dropdown: 100;
    --z-modal: 999;
    --z-modal-backdrop: 899;
    --z-alert: 4234;
    --logo-width: 180px;
    --logo-height: 45px;

    /* skeleton loading */
    --skeleton-bg: #eeeff1;
    --skeleton-bg-dark: #f0f2f6;
    --skeleton-shine: rgba(255, 255, 255, 0.4);
    --skeleton-radius: var(--radius-md);

    /* Opacity Values */
    --opacity-69: 0.69;
    --opacity-70: 0.7;

    /* svg variables  */
    --svg-glow-color: #2563eb33;
    --svg-circle-fill: #2563eb17;
    --svg-circle-stroke: #2563eb;
    --svg-mask-fill: #ffffff;
    --svg-path-main: #ffffff;
    --svg-path-main-plas: #ffffff;
    --svg-path-main-circle: #ffffff;
    --svg-accent-light: #2563eb33;
    --svg-gradient-start: #2563eb33;
    --svg-gradient-end: #2563eb;
    --svg-primary-dark: #1041ae;
    --svg-secondary-light: #2563eb17;
    --svg-button-glow: #66adff;
    --svg-button-gradient-start: #66adff;
    --svg-button-gradient-end: #66adff;

    /* Message types */
    --success-bg: #E8F5E9;
    --success-bg-2: #F0FDF4;
    --success-border: #43A047;
    --success-color: #43A047;
    --success-icon: #43A047;

    --error-bg: #FFEBEE;
    --error-bg-2: #ff2c2c21;
    --error-border: #F44336;
    --error-color: #F44336;
    --error-icon: #F44336;

    --warning-bg: #FFF3E0;
    --warning-bg-2: #FFFBEB;
    --warning-border: #FF9800;
    --warning-color: #FF9800;
    --warning-icon: #FF9800;

    --info-bg: #E3F2FD;
    --info-bg-2: #EFF6FF;
    --info-border: #2196F3;
    --info-color: #263238;
    --info-icon: #2196F3;
    
   --role-customer-color: #0f766e;
   --role-customer-bg: #ecfeff;

    /* Role Colors - Light Mode */
   --role-admin-color: #4338ca;
   --role-admin-bg: #eef2ff;
}

[data-theme="dark"] {

    --primary-color: #2563eb;
    --primary-hover: #4a7dee;
    --primary-light: #2563eb33;
    --primary-more-light: #2563eb17;
    --primary-dark: #124ac7;
    --primary-more-dark: #0c3389;


    --bg-primary: #121419;
    --bg-secondary: #151b28;
    --bg-tertiary: #181f2e;
    --bg-accent: #12161f;
    --bg-modal: rgba(0, 0, 0, 0.8);
    --bg-hover: #131a29;
    --bg-active: #141d3260;
    --bg-card: #15171e;

    --text-primary: #f0f2f5;
    --text-secondary: #c4ccd7;
    --text-tertiary: #98a6ba;
    --text-muted: #6d809d;
    --text-light: #f0f2f568;
    --text-dark: #f0f2f5;
    --text-color: #bdcef2;
    --text-white: #ffffff;
    --text-placeholder: #607491;

    --border-primary: #384663;
    --border-secondary: #435476;
    --border-light: #38466355;
    --border-accent: #f0f2f516;

    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.5);

    --skeleton-bg: #1f2228;
    --skeleton-bg-dark: #1d1f23;
    --skeleton-shine: rgba(255, 255, 255, 0.08);
    --skeleton-radius: var(--radius-md);

    --svg-glow-color: #2563eb33;
    --svg-circle-fill: transparent;
    --svg-circle-stroke: #2563eb;
    --svg-mask-fill: #121419;
    --svg-path-main: #2563eb;
    --svg-path-main-plas: #ffffff;
    --svg-path-main-circle: #15171e;
    --svg-accent-light: #2563eb33;
    --svg-gradient-start: #2563eb33;
    --svg-gradient-end: #2563eb;
    --svg-primary-dark: #124ac7;
    --svg-secondary-light: #2563eb17;
    --svg-button-glow: #121419;
    --svg-button-gradient-start: #66adff;
    --svg-button-gradient-end: #66adff;


    /* Message types - Premium Dark */

    /* Success */
    --success-bg: #1B5E20;
    --success-bg-2: #16281D;
    --success-border: #2E7D32;
    --success-color: #A5D6A7;
    --success-icon: #4CAF50;

    /* Error */
    --error-bg: #B71C1C;
    --error-bg-2: #2B1819;
    --error-border: #C62828;
    --error-color: #FFCDD2;
    --error-icon: #EF5350;

    /* Warning */
    --warning-bg: #E65100;
    --warning-bg-2: #2D2112;
    --warning-border: #EF6C00;
    --warning-color: #FFE0B2;
    --warning-icon: #FF9800;

    /* Info */
    --info-bg: #0D47A1;
    --info-bg-2: #172936;
    --info-border: #1565C0;
    --info-color: #BBDEFB;
    --info-icon: #2196F3;

    /* Role Colors - Dark */
    --role-customer-bg: #122524;
    --role-customer-color: #5EEAD4;

    --role-admin-bg: #1A1E3A;
    --role-admin-color: #A5B4FC;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif
}