:root {
    /* Base */
    --bg-color: #fff;
    --bg-color-1: #f1f5f7;
    --text-color: #333;
    --border-color: #ddd;
    --border-color-1: #999;
    --hover-color: #313a46;
    --hover-color-1: #00000026;
    --bg-backdrop: #000;
    /* Inputs */
    --input-placeholder-color: #999;
    --input-disabled-bg: #e9ecef;
    --input-focus-border: #80bdff;
    --input-focus-shadow: rgba(0, 123, 255, .25);
    --input-height: 36px;
    /* Header */
    --header-bg: #313a46;
    --header-color: #fff;
    --header-border-color: #ffffff29;
    /* Theme Colors */
    --primary-bg: #3366cc;
    --primary-hover-bg: #2b5bb8;
    --primary-color: #fff;
    --secondary-bg: #757575;
    --secondary-hover-bg: #616161;
    --secondary-color: #fff;
    --success-bg: #2e7d32;
    --success-hover-bg: #256628;
    --success-color: #fff;
    --danger-bg: #c62828;
    --danger-hover-bg: #ad2020;
    --danger-color: #fff;
    --warning-bg: #c88700;
    --warning-hover-bg: #a96f00;
    --warning-color: #fff;
    --info-bg: #5e35b1;
    --info-hover-bg: #512da8;
    --info-color: #fff;
    /* Light */
    --primary-light-bg: #e8f0ff;
    --primary-light-color: #1e4fa8;
    --secondary-light-bg: #f1f3f5;
    --secondary-light-color: #495057;
    --success-light-bg: #e8f5e9;
    --success-light-color: #1b5e20;
    --danger-light-bg: #fdeaea;
    --danger-light-color: #b71c1c;
    --warning-light-bg: #fff8e1;
    --warning-light-color: #8a5a00;
    --info-light-bg: #f0ebff;
    --info-light-color: #4527a0;
    /* Surface */
    --surface-bg: #1E2129;
    --surface-hover-bg: #2A2E38;
    --surface-color: #fff;
    --surface-bg-1: #eee;
    --surface-hover-bg-1: #dcdcdc;
    --surface-color-1: #1E2129;
    /* Table */
    --row-bg: #eee;
    --row-focus: #ffe4ac;
    --table-thead-tr: #ddd;
    --table-row-success-bg: #c9ffd1;
    --table-row-active-bg: #b5d5fa;
    --table-row-danger-bg: #ffc7c7;
    --table-row-warning-bg: #ff00002e;
    --table-child-bg: #c0dcff;
    --table-child-border: #c0dcff;
    /* Accent Colors */
    --red: #f00;
    --blue: #0026ff;
    --green: #22a822;
    --orange: #ff6a00;
    --purple: #6900ff;
    --pink: #ba00ff;
    /* Back to Top */
    --back-to-top-bg: #000000cc;
    --back-to-top-color: #fff;
    /* Light */
    --toggle-light-bg: #fcc64d;
    --toggle-light-ray: #fcc64d;
    /* Dark */
    --toggle-dark-bg: #312E81;
    --toggle-dark-shadow: #312E81;
    /* Shadows */
    --shadow-s: 0 1px 4px rgba(0, 0, 0, .2);
    --shadow-m: 0 0px 20px rgba(0, 0, 0, .1);
    --shadow-l: 0 20px 60px rgba(0, 0, 0, .15);
    --shadow-focus: 0 0 0 3px var(--input-focus-shadow);
    --shadow-warning: 0 2px 20px var(--warning-bg);
    --shadow-inset: inset 0 0 15px 0px #ffffff99;
    /* Typography */
    --fs-s: 14px;
    --fs-m: 15px;
    --fs-l: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 26px;
    /* Loader */
    --loader-bg: #16181d;
    --loader-text-color: #fff;
    --loader-circle-bg: #454545;
    --loader-spin-bg: #fcc64d;
    /* Scroll */
    --scrollbar-width: 8px;
    --scrollbar-background-track: #f1f1f1;
    --scrollbar-border-radius: 8px;
    --scrollbar-background-thumb: #888;
    --scrollbar-border-radius: 8px;
    --scrollbar-background-hover: #555;
    /* Tip */
    --tip-bg: #8b0000;
    --tip-border: #fbbf24;
    --tip-color: #ffffff;
    --tip-bold: #ffeb3b;
    /* Chart */
    --chart-text: #2f3542;
    --chart-grid: #c9d2dc;
    --chart-border: #8f9ba8;
    /* Others */
    --opacity-1: 0.3;
    --opacity-2: 0.7;
    --hover-opacity: 0.5;
    --border-radius: 5px;
    --border-radius-1: 10px;
    --border-radius-2: 2px;
    --icon-color-contrast: #fff;
}