:root{

    /*====================================================
      BRAND COLORS
    ====================================================*/

    /* Primary (Orange) */

    --primary: #F97316;
    --primary-dark: #EA580C;
    --primary-light: #FFF7ED;
    --primary-hover: #C2410C;
    --primary-rgb: 249,115,22;

    /* Secondary (Blue/Cyan) */

    --secondary: #00B8C9;
    --secondary-dark: #008C99;
    --secondary-light: #EAFDFF;
    --secondary-hover: #0099A8;
    --secondary-rgb: 0,184,201;

    /* Optional Accent */

    --accent: #1F6FEB;
    --accent-light: #EFF6FF;
    --accent-dark: #1A5ED0;

    /*====================================================
      STATUS COLORS
    ====================================================*/

    --success: #00C853;
    --success-light: #E8FFF0;
    --success-dark: #009944;

    --warning: #FFB300;
    --warning-light: #FFF8E5;
    --warning-dark: #D99400;

    --danger: #FF5252;
    --danger-light: #FFF0F0;
    --danger-dark: #D93C3C;

    --info: #0EA5E9;
    --info-light: #F0F9FF;
    --info-dark: #0284C7;

    /*====================================================
      TEXT
    ====================================================*/

    --heading: #111827;

    --text: #212529;
    --text-light: #6C757D;
    --text-muted: #909090;

    --text-black: #000000;
    --text-white: #FFFFFF;

    /*====================================================
      BACKGROUNDS
    ====================================================*/

    /* KEEPING YOUR EXISTING SITE BACKGROUND */

    --background: #EEFFFF;
    --body-bg: #F4FDFF;

    --section-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-hover: #FAFAFA;

    --header-bg: #FFFFFF;

    --sidebar-bg: #0F172A;
    --sidebar-hover: #1E293B;
    --sidebar-active: var(--primary);

    /*====================================================
      BORDERS
    ====================================================*/

    --border: #E8E8E8;
    --border-light: #F3F3F3;
    --border-dark: #DADADA;

    /*====================================================
      INPUTS
    ====================================================*/

    --input-bg: #FFFFFF;
    --input-border: #D8DEE4;
    --input-focus: var(--primary);
    --input-placeholder: #9CA3AF;

    /*====================================================
      BUTTONS
    ====================================================*/

    --btn-primary-bg: var(--primary);
    --btn-primary-hover: var(--primary-dark);
    --btn-primary-text: #FFFFFF;

    --btn-secondary-bg: var(--secondary);
    --btn-secondary-hover: var(--secondary-dark);
    --btn-secondary-text: #FFFFFF;

    --btn-success-bg: var(--success);
    --btn-success-hover: var(--success-dark);

    --btn-danger-bg: var(--danger);
    --btn-danger-hover: var(--danger-dark);

    /*====================================================
      TABLE
    ====================================================*/

    --table-head-bg: #F8FAFC;
    --table-row-hover: #F7FCFF;
    --table-border: #ECECEC;

    /*====================================================
      BADGES
    ====================================================*/

    --badge-success-bg: #E8FFF0;
    --badge-success-text: var(--success);

    --badge-warning-bg: #FFF8E5;
    --badge-warning-text: var(--warning);

    --badge-danger-bg: #FFF1F1;
    --badge-danger-text: var(--danger);

    --badge-info-bg: #EAF7FF;
    --badge-info-text: var(--info);

    /*====================================================
      ALERTS
    ====================================================*/

    --alert-success-bg: #E8FFF0;
    --alert-warning-bg: #FFF8E5;
    --alert-danger-bg: #FFF2F2;
    --alert-info-bg: #F0F9FF;

    /*====================================================
      FOOTER
    ====================================================*/

    --footer: #17181C;
    --footer-text: #FFFFFF;
    --footer-muted: #A6A6A6;

    /*====================================================
      DARK COLORS
    ====================================================*/

    --dark: #0F172A;
    --dark-2: #111827;
    --dark-3: #1E293B;
    --dark-4: #334155;

    /*====================================================
      GLASS EFFECT
    ====================================================*/

    --glass-bg: rgba(255,255,255,.08);
    --glass-border: rgba(255,255,255,.15);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.12);

    /*====================================================
      SHADOWS
    ====================================================*/

    --shadow-xs: 0 1px 3px rgba(0,0,0,.04);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.05);
    --shadow-md: 0 8px 25px rgba(0,0,0,.08);
    --shadow-lg: 0 15px 45px rgba(0,0,0,.12);
    --shadow-xl: 0 25px 60px rgba(0,0,0,.18);

    /* Legacy */

    --shadow: 0 5px 15px rgba(0,0,0,.10);

    /*====================================================
      BORDER RADIUS
    ====================================================*/

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-xxl: 32px;
    --radius-round: 50%;

    /*====================================================
      TRANSITIONS
    ====================================================*/

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .5s ease;

    /*====================================================
      Z INDEX
    ====================================================*/

    --z-header: 100;
    --z-dropdown: 500;
    --z-sidebar: 900;
    --z-modal: 9999;
    --z-loader: 99999;

    /*====================================================
      LAYOUT
    ====================================================*/

    --container: 1280px;
    --container-sm: 960px;
    --container-xs: 768px;

    --header-height: 78px;
    --sidebar-width: 280px;

    /*====================================================
      SPACING
    ====================================================*/

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-xxl: 50px;

    /*====================================================
      TYPOGRAPHY
    ====================================================*/

    --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-xxl: 30px;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /*====================================================
      LEGACY COLORS
      (for backward compatibility)
    ====================================================*/

    --white: #FFFFFF;

}