:root {
	/* Static colors */
	--red: #ff0000;

	/* Dynamic quick shades */
	--white: #fefefe;
	--white-hover: #eceff2;
	--black: #080a0c;
	--black-hover: #181e24;
	--grey-dark: #3e4e5e;
	--grey-dark-hover: #2e3a46;
	--grey: #678099;
	--grey-hover: #566c82;
	--grey-light: #a3b2c1;
	--grey-light-hover: #8b9eb1;

	/* Dynamic colors (Light shades) */
	--ls-1: #fdfdfd;
	--ls-2: #f9fafb;
	--ls-3: #f5f7f9;
	--ls-4: #f1f3f5;
	--ls-5: #eceff2;
	--ls-6: #e7ebef;
	--ls-7: #e2e7ec;
	--ls-8: #dde3e9;
	--ls-9: #d9dfe5;
	--ls-10: #d4dbe2;
	--ls-11: #cfd7df;
	--ls-12: #cad3dc;
	--ls-13: #c5cfd9;
	--ls-14: #c1cbd5;
	--ls-15: #bcc7d2;
	--ls-16: #b7c3cf;

	/* Dynamic colors (Dark shades) */
	--ds-1: #adbbc9;
	--ds-2: #a5b4c3;
	--ds-3: #9eaebe;
	--ds-4: #97a8b9;
	--ds-5: #8fa2b5;
	--ds-6: #889cb0;
	--ds-7: #8196ab;
	--ds-8: #7a90a6;
	--ds-9: #738aa1;
	--ds-10: #6b849d;
	--ds-11: #657e97;
	--ds-12: #607890;
	--ds-13: #5b7289;
	--ds-14: #566c82;
	--ds-15: #52667a;
	--ds-16: #4d6073;

	/* Highlights */
	--highlight-muted: #5a8caf;
	--highlight-muted-bg: #5a8caf30;
	--highlight-saturated: #3b82f6;
	--highlight-saturated-bg: #3b82f620;

	/* Alerts */
	--success: #5cb85c;
	--info: #5bc0de;
	--warning: #f0ad4e;
	--danger: #d9534f;
	--light: #f5f7f9;
	--dark: #d4dbe2;

	--success-hover: #449d44;
	--info-hover: #31b0d5;
	--warning-hover: #eb971f;
	--danger-hover: #c9302c;
	--light-hover: #edf0f3;
	--dark-hover: #b9c5d1;

	--success-emphasis: #3c763d;
	--info-emphasis: #31708f;
	--warning-emphasis: #ac923d;
	--danger-emphasis: #a94442;
	--light-emphasis: #405060;
	--dark-emphasis: #1a2026;

	--success-toned: #c8d9ab;
	--info-toned: #a3c6d6;
	--warning-toned: #dbce9a;
	--danger-toned: #d6c1bf;
	--light-toned: #d1d9e1;
	--dark-toned: #bcc7d2;

	--success-subtle: #dff2bf;
	--info-subtle: #bde5f8;
	--warning-subtle: #feefb3;
	--danger-subtle: #fde4e1;
	--light-subtle: #fafbfc;
	--dark-subtle: #dce2e8;

	/* Primary colors */
	--primary-color: #254668;
	--primary-color-rgb: 37, 70, 104;

	--primary-light: #e4ecf5;
	--primary-light-1: #c9daec;
	--primary-light-2: #adc7e2;
	--primary-light-3: #92b5d8;
	--primary-light-4: #77a2cf;
	--primary-light-5: #5c90c5;

	--primary-light-rgb: 228, 236, 245;
	--primary-light-1-rgb: 201, 218, 236;
	--primary-light-2-rgb: 173, 199, 226;
	--primary-light-3-rgb: 146, 181, 216;
	--primary-light-4-rgb: 119, 162, 207;
	--primary-light-5-rgb: 92, 144, 197;

	--primary-dark: #213f5e;
	--primary-dark-1: #1e3853;
	--primary-dark-2: #1a3149;
	--primary-dark-3: #162a3e;
	--primary-dark-4: #132334;
	--primary-dark-5: #0f1c2a;

	--primary-dark-rgb: 33, 63, 94;
	--primary-dark-1-rgb: 30, 56, 83;
	--primary-dark-2-rgb: 26, 49, 73;
	--primary-dark-3-rgb: 22, 42, 62;
	--primary-dark-4-rgb: 19, 35, 52;
	--primary-dark-5-rgb: 15, 28, 42;

	--primary-emphasis: #0c1621;
	--primary-subtle: #f2f3f4;
	--primary-over-white: #254668;
	--primary-over-black: #aecbf4;
	--primary-contrast: #fefefe;
	--primary-contrast-toned: #f2f3f4;

	--primary-emphasis-rgb: 12, 22, 33;
	--primary-subtle-rgb: 242, 243, 244;
	--primary-over-white-rgb: 37, 70, 104;
	--primary-over-black-rgb: 174, 203, 244;
	--primary-contrast-rgb: 254, 254, 254;
	--primary-contrast-toned-rgb: 242, 243, 244;

	--primary-h: 210.45;
	--primary-s: 47.52%;
	--primary-l: 27.65%;

	/* Secondary colors */
	--secondary-color: #2464a2;
	--secondary-color-rgb: 36, 100, 162;

	--secondary-light: #e5f0f9;
	--secondary-light-1: #cce0f4;
	--secondary-light-2: #b2d1ee;
	--secondary-light-3: #99c1e8;
	--secondary-light-4: #7fb2e3;
	--secondary-light-5: #66a2dd;

	--secondary-light-rgb: 229, 240, 249;
	--secondary-light-1-rgb: 204, 224, 244;
	--secondary-light-2-rgb: 178, 209, 238;
	--secondary-light-3-rgb: 153, 193, 232;
	--secondary-light-4-rgb: 127, 178, 227;
	--secondary-light-5-rgb: 102, 162, 221;

	--secondary-dark: #205a92;
	--secondary-dark-1: #1d5082;
	--secondary-dark-2: #194671;
	--secondary-dark-3: #163c61;
	--secondary-dark-4: #123251;
	--secondary-dark-5: #0e2841;

	--secondary-dark-rgb: 32, 90, 146;
	--secondary-dark-1-rgb: 29, 80, 130;
	--secondary-dark-2-rgb: 25, 70, 113;
	--secondary-dark-3-rgb: 22, 60, 97;
	--secondary-dark-4-rgb: 18, 50, 81;
	--secondary-dark-5-rgb: 14, 40, 65;

	--secondary-emphasis: #0b2033;
	--secondary-subtle: #f2f4f7;
	--secondary-over-white: #2464a2;
	--secondary-over-black: #2464a2;
	--secondary-contrast: #fefefe;
	--secondary-contrast-toned: #f2f4f7;

	--secondary-emphasis-rgb: 11, 32, 51;
	--secondary-subtle-rgb: 242, 244, 247;
	--secondary-over-white-rgb: 36, 100, 162;
	--secondary-over-black-rgb: 36, 100, 162;
	--secondary-contrast-rgb: 254, 254, 254;
	--secondary-contrast-toned-rgb: 242, 244, 247;

	--secondary-h: 209.52;
	--secondary-s: 63.64%;
	--secondary-l: 38.82%;

	/* Shadow */
	--shadow-color: var(--primary-dark-5-rgb);
	--shadow: 0 4px 8px rgba(0, 0, 0, .15);
	--shadow-2xs: 0 0 1px rgba(var(--shadow-color), 0.06), 1px 1px 1px -1px rgba(var(--shadow-color), 0.06);
	--shadow-xs:  0 0 1px rgba(var(--shadow-color), 0.08), 1px 1px 2px -1px rgba(var(--shadow-color), 0.08);
	--shadow-sm: 0 0 1px rgba(var(--shadow-color), 0.08), 2px 2px 3px -1px rgba(var(--shadow-color), 0.08);
	--shadow-md: 0 0 1px rgba(var(--shadow-color), 0.08), 2px 2px 3px -1px rgba(var(--shadow-color), 0.08), 7px 7px 11px -3px rgba(var(--shadow-color), 0.08);
	--shadow-lg: 0 0 1px rgba(var(--shadow-color), 0.08), 3px 3px 5px -2px rgba(var(--shadow-color), 0.08), 12px 12px 20px -5px rgba(var(--shadow-color), 0.08);
	--shadow-xl: 0 0 1px rgba(var(--shadow-color), 0.08), 4px 4px 7px -2px rgba(var(--shadow-color), 0.08), 18px 18px 28px -6px rgba(var(--shadow-color), 0.08);
	--shadow-2xl: 0 0 1px rgba(var(--shadow-color), 0.08), 5px 5px 9px -3px rgba(var(--shadow-color), 0.08), 26px 26px 40px -8px rgba(var(--shadow-color), 0.08);
	--shadow-popup: var(--shadow-xl);
	--shadow-card: var(--shadow-md);

	/* Static colors (RGB) */
	--white-rgb: 254, 254, 254;
	--white-hover-rgb: 236, 239, 242;
	--black-rgb: 8, 10, 12;
	--black-hover-rgb: 24, 30, 36;
	--grey-rgb: 103, 128, 153;
	--grey-hover-rgb: 86, 108, 130;
	--grey-dark-rgb: 62, 78, 94;
	--grey-dark-hover-rgb: 46, 58, 70;
	--grey-light-rgb: 163, 178, 193;
	--grey-light-hover-rgb: 139, 158, 177;
	--light-rgb: 245, 247, 249;
	--light-hover-rgb: 237, 240, 243;
	--light-emphasis-rgb: 64, 80, 96;
	--light-toned-rgb: 209, 217, 225;
	--light-subtle-rgb: 250, 251, 252;
	--dark-rgb: 212, 219, 226;
	--dark-hover-rgb: 185, 197, 209;
	--dark-emphasis-rgb: 26, 32, 38;
	--dark-toned-rgb: 188, 199, 210;
	--dark-subtle-rgb: 220, 226, 232;

	/* Alerts (RGB) */
	--success-rgb: 92, 184, 92;
	--info-rgb: 91, 192, 222;
	--warning-rgb: 240, 173, 78;
	--danger-rgb: 217, 83, 79;

	/* Highlights (RGB) */
	--highlight-muted-rgb: 90, 140, 175;
	--highlight-saturated-rgb: 59, 130, 246;

	/* ==================================================
	Structure
	Everything below is intentionally value-only so a panel or website theme can
	restyle the system by overriding a variable instead of fighting the base CSS
	with !important. Values reproduce Rafed's existing look exactly.
	================================================== */

	/* Radius */
	--radius-2: 2px;
	--radius-3: 3px;
	--radius-4: 4px;
	--radius-5: 5px;
	--radius-10: 10px;
	--radius-circle: 50%;
	--radius-pill: 100px;
	--primary-radius: var(--radius-3);

	/* Shorthands (Stacks light to dark) */
	--border-color: #b8b8b8;
	--scrollbar-track: var(--ls-4);
	--scrollbar-thumb: var(--primary-emphasis);
	--muted-dark: var(--ds-14);
	--muted-light: var(--ds-8);
	--border-stack-1: var(--ls-6);
	--border-stack-2: var(--ls-7);
	--border-stack-3: var(--ls-8);
	--bg-stack-1: var(--ls-1);
	--bg-stack-2: var(--ls-2);
	--bg-stack-3: var(--ls-3);

	/* Inputs */
	--input-height: 30px;
	--input-radius: 0px;
	--input-padding: 0 5px 0 5px;
	--input-font-size: 1.2rem;
	--input-color: #101010;
	--input-background: #fcfcfc;
	--input-background-secondary: var(--ls-3);
	--input-border-color: #b9b9b9;
	--input-border: 1px solid var(--input-border-color);
	--input-border-secondary-color: var(--ls-16);
	--input-border-secondary: 1px solid var(--input-border-secondary-color);
	--input-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
	--input-focus-border-color: var(--primary-color);
	--input-focus-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
	--input-disabled-color: #909090;
	--input-disabled-background: #eee;
	--input-toggle-border-color: #909090;
	--radio-size: 18px;
	--checkbox-size: 20px;
	--checkbox-radius: var(--radius-2);

	/* Dropdowns */
	--dropdown-padding: 0;
	--dropdown-radius: var(--radius-4);
	--dropdown-background: #fff;
	--dropdown-border: 1px solid rgba(0, 0, 0, 0.15);
	--dropdown-divider: #e5e5e5;
	--dropdown-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

	/* Data table */
	--dt-title-width: 180px;
	--dt-title-size: var(--input-font-size);
	--dt-title-weight: normal;
	--dt-title-align: start;
	--dt-title-bg-color: var(--ls-2);
	--dt-input-bg-color: var(--white);
	--dt-cell-border: 1px solid var(--ls-16);
	--dt-cell-spacing: 10px;
	--dt-container-padding: var(--dt-cell-spacing);
	--dt-container-border: 1px solid var(--ls-10);
	--dt-container-radius: var(--radius-5);
	--dt-container-shadow: var(--shadow-md);
	--dt-inputs-radius: var(--input-radius);
}