:root {
    --font-primary: 'DM Sans', 'Nunito', sans-serif;
    --font-legacy: 'Nunito', sans-serif;
    --black: #202020;
    --spring-green-50: #effef5;
    --spring-green-100: #d8ffeb;
    --spring-green-200: #b4fed8;
    --spring-green-300: #7afbba;
    --spring-green-400: #1fec85;
    --spring-green-500: #10d773;
    --spring-green-600: #07b25d;
    --spring-green-700: #098c4b;
    --spring-green-800: #0d6e3f;
    --spring-green-900: #0d5a36;
    --jaffa-50: #fef5ee;
    --jaffa-100: #fee9d6;
    --jaffa-200: #fbcfad;
    --jaffa-300: #f8ad79;
    --jaffa-400: #f47c3c;
    --jaffa-500: #f15e1e;
    --jaffa-600: #e24514;
    --jaffa-700: #bc3312;
    --jaffa-800: #952917;
    --jaffa-900: #782516;
    --persimmon-50: #fff1f1;
    --persimmon-100: #ffe2e1;
    --persimmon-200: #ffc8c7;
    --persimmon-300: #ffa2a0;
    --persimmon-400: #ff5e5b;
    --persimmon-500: #f83e3b;
    --persimmon-600: #e5211d;
    --persimmon-700: #c11714;
    --persimmon-800: #a01714;
    --persimmon-900: #841a18;
    --blue-50: #effaff;
    --blue-100: #def3ff;
    --blue-200: #b6eaff;
    --blue-300: #75dbff;
    --blue-400: #2ccaff;
    --blue-500: #00aff1;
    --blue-600: #0090d4;
    --blue-700: #0072ab;
    --blue-800: #00608d;
    --blue-900: #065074;
    --brand-blue-50: #f0f5fe;
    --brand-blue-100: #dde8fc;
    --brand-blue-200: #c3d8fa;
    --brand-blue-300: #99c0f7;
    --brand-blue-400: #72a4f2; /* Brand blue */
    --brand-blue-500: #467ceb;
    --brand-blue-600: #305de0;
    --brand-blue-700: #284acd;
    --brand-blue-800: #263da7;
    --brand-blue-900: #243784;
    --brand-blue-950: #1b2450;
    --brand-red-50: #fff5ed;
    --brand-red-100: #ffe8d4;
    --brand-red-200: #ffcda8;
    --brand-red-300: #ffa970;
    --brand-red-400: #ff7937;
    --brand-red-500: #ff5a16; /* Brand red */
    --brand-red-600: #f03a06;
    --brand-red-700: #c72807;
    --brand-red-800: #9e210e;
    --brand-red-900: #7f1f0f;
    --brand-red-950: #450b05;
    --brand-yellow-50: #fffaeb;
    --brand-yellow-100: #fff1c6;
    --brand-yellow-200: #ffda6e; /* Brand yellow */
    --brand-yellow-300: #ffcb4a;
    --brand-yellow-400: #ffb520;
    --brand-yellow-500: #f99207;
    --brand-yellow-600: #dd6b02;
    --brand-yellow-700: #b74906;
    --brand-yellow-800: #94370c;
    --brand-yellow-900: #7a2e0d;
    --brand-yellow-950: #461602;
    --gray-30: #f5f5f5;
    --gray-50: #f7f7f7;
    --gray-100: #f0f0f0;
    --gray-200: #e4e4e4;
    --gray-300: #d1d1d1;
    --gray-400: #b4b4b4;
    --gray-500: #9a9a9a;
    --gray-600: #818181;
    --gray-700: #6a6a6a;
    --gray-800: #5a5a5a;
    --gray-900: #4e4e4e;
    --white: #ffffff;
    --mirage-50: #f4f8f9;
    --mirage-100: #dce7eb;
    --mirage-200: #b9cdd6;
    --mirage-300: #8eacba;
    --mirage-400: #66889b;
    --mirage-500: #4c6d80;
    --mirage-600: #3b5566;
    --mirage-700: #324653;
    --mirage-800: #2b3a44;
    --mirage-900: #192025;
    --stone-100: #F4EFE7;
    --stone-200: #EDE6DD;
    --stone-400: #E9DFD2;
    --stone-500: #E2D7C5;
    --vista-white-50: #f8f7f7;
    --vista-white-100: #edebea;
    --vista-white-200: #e6e3e2;
    --vista-white-300: #d4cfcd;
    --vista-white-400: #bab3af;
    --vista-white-500: #a19792;
    --vista-white-600: #897e79;
    --vista-white-700: #716864;
    --vista-white-800: #5f5755;
    --vista-white-900: #524c4a;
    --vista-white-950: #2a2625;
    --brand-blue-50: #f0f5fe;
    --brand-blue-100: #dde8fc;
    --brand-blue-200: #c3d8fa;
    --brand-blue-300: #99c0f7;
    --brand-blue-400: #72a4f2;
    --brand-blue-500: #467ceb;
    --brand-blue-600: #305de0;
    --brand-blue-700: #284acd;
    --brand-blue-800: #263da7;
    --brand-blue-900: #243784;
    --brand-blue-950: #1b2450;
    --brand-red-50: #fff5ed;
    --brand-red-100: #ffe8d4;
    --brand-red-200: #ffcda8;
    --brand-red-300: #ffa970;
    --brand-red-400: #ff7937;
    --brand-red-500: #ff5a16;
    --brand-red-600: #f03a06;
    --brand-red-700: #c72807;
    --brand-red-800: #9e210e;
    --brand-red-900: #7f1f0f;
    --brand-red-950: #450b05;
    --brand-yellow-50: #fffaeb;
    --brand-yellow-100: #fff1c6;
    --brand-yellow-200: #ffda6e;
    --brand-yellow-300: #ffcb4a;
    --brand-yellow-400: #ffb520;
    --brand-yellow-500: #f99207;
    --brand-yellow-600: #dd6b02;
    --brand-yellow-700: #b74906;
    --brand-yellow-800: #94370c;
    --brand-yellow-900: #7a2e0d;
    --brand-yellow-950: #461602;
    --transparent-active: transparent;
    --transparent-hover: var(--gray-300);
    --gray-opc-1: #c0b6b380;
    --gray-opc-2: #c0b6b3eb;
    --linen-50: #fefaf9;
    --transparent: transparent;
    --skeleton-gradient: linear-gradient(to right,var(--gray-100) 4%,var(--gray-200) 25%,var(--gray-100) 36%);
    /*Shadow*/
    --shadow-reg-0: 0px 0px 2px rgba(0, 0, 0, 0.15), 0px 2px 5px rgba(0, 0, 0, 0.05), 0px 8px 40px rgba(0, 0, 0, 0.04);
    --shadow-white-reg-0: 0px 0px 2px #ffffff29, 0px 2px 5px #ffffff29, 0px 8px 40px #ffffff29;
    --shadow-none: none;
    /*Text*/
    --text-color: var(--mirage-900);
    --text-color-hover: var(--mirage-800);
    --text-primary-color: var(--brand-blue-500);
    --sub-text-color: var(--gray-600);
    --text-success: var(--spring-green-800);
    --text-default-white: var(--white);
    --text-danger: var(--persimmon-600);
    --text-disable: var(--gray-500);
    --weight-s: 400;
    --weight-m: 600;
    --weight-l: 800;
    --weight-xl: 900;
    --text-w-b: var(--white);
    --text-link: var(--brand-blue-500);
    /*Background*/
    --bg-color-layer-0: var(--white);
    --bg-color-layer-1: var(--white);
    --bg-color-layer-2: var(--white);
    --bg-color-warning: var(--jaffa-100);
    --bg-color-danger: var(--persimmon-200);
    --bg-gray-layer-0: var(--gray-30);
    --bg-gray-layer-1: var(--gray-50);
    --bg-gray-layer-2: var(--gray-50);
    --bg-gradient-membership: linear-gradient(0deg, rgba(255,255,255,1) 23%, rgba(255,255,255,0.2978233529740021) 61%, rgba(255,255,255,0) 63%);
    --bg-default-dark: var(--mirage-900);
    --bg-btn-dark-gray: var(--gray-200);
    --bg-on-boarding: var(--linen-50);
    --bg-b-w: var(--black);
    --bg-b-w-hover: var(--vista-white-950);
    --bg-beige-black:var(--stone-200);
    /* Tab */
    --opacity-20: .2;
    --settings-tab-hover: var(--gray-50);
    /* Arrow Blockquote */
    --arrow-color: var(--gray-100);
    /*border*/
    --border-layer-0: .5px solid var(--vista-white-300);
    --border-layer-1: .5px solid var(--gray-500);
    --border-bottom: .5px solid var(--gray-300);
    --border-warning-0: .5px solid var(--jaffa-400);
    --border-color-gray: var(--gray-400);
    --border-gray: .5px solid var(--gray-400);
    --border-selected: .5px solid var(--mirage-900);
    /*Button*/
    --btn-bg-primary: var(--black);
    --btn-bg-primary-hover: var(--vista-white-950);
    --btn-bg-blue-secondary: var(--brand-blue-500);
    --btn-bg-blue-secondary-hover: var(--brand-blue-600);
    --btn-bg-gray: var(--gray-100);
    --btn-bg-gray-hover: var(--gray-200);
    --btn-bg-gray-secondary: var(--gray-opc-1);
    --btn-bg-gray-secondary-hover: var(--gray-opc-2);
    --btn-bg-sidebar: var(--transaparent);
    --btn-bg-sidebar-hover: var(--gray-200);
    --btn-bg-sidebar-active: var(--brand-blue-50);
    --btn-text-sidebar-active: var(--brand-blue-500);
    --btn-text-sidebar: var(--mirage-900);
    --btn-b-w: var(--black);
    --btn-b-w-hover: var(--vista-white-950);
    --btn-w-b: var(--white);
   
    /*Form*/
    --form-bg-white: var(--white);
    --form-bg: var(--vista-white-50);
    --form-bg-hover: var(--white);
    --form-bg-1: var(--vista-white-100);
    --form-border: .5px solid var(--vista-white-300);
    --form-border-hover: .5px solid var(--vista-white-700);
    --form-border-focus: .5px solid var(--gray-800);
    --form-border-color-focus: var(--gray-800);
    --form-border-1: .5px solid var(--vista-white-700);
    /* Component Shadow*/
    --comp-shadow-layer-1: var(--shadow-reg-0);
    --comp-shadow-layer-2: var(--shadow-reg-0);
    /* Component Bg*/
    --chat-list-bg-focus: var(--spring-green-50);
    --chat-list-border: .5px solid var(--white);
    --chat-list-border-focus: .5px solid var(--spring-green-400);
    /*Image Filter*/
    --image-invert: brightness(-0.5) invert(0);
    /* radius */
    --rounded-full: 1000px;
    --rounded-primary: 18px;
}

[data-theme="dark"] {
    --gray-opc-1: var(--mirage-600);
    --gray-opc-2: var(--mirage-500);
    --text-primary-color: var(--blue-500);
    --text-color: var(--mirage-100);
    --text-color-hover: var(--mirage-200);
    --sub-text-color: var(--mirage-200);
    --text-success: var(--spring-green-400);
    --skeleton-gradient: linear-gradient(to right,var(--mirage-700) 4%,var(--mirage-500) 25%,var(--mirage-700) 36%);
    --text-default-white: var(--mirage-900);
    --text-danger: var(--white);
    --text-disable: var(--mirage-400);
    --text-w-b: var(--black);
    --text-link: var(--brand-blue-200);
    /* Background */
    --bg-color-layer-0: var(--mirage-900);
    --bg-color-layer-1: var(--mirage-800);
    --bg-color-layer-2: var(--mirage-700);
    --bg-color-warning: var(--jaffa-800);
    --bg-gray-layer-1: var(--mirage-800);
    --bg-gray-layer-2: var(--mirage-600);
    --bg-gray-layer-0: var(--mirage-900);
    --bg-default-dark: var(--white);
    --bg-btn-dark-gray: var(--mirage-700);
    --bg-color-danger: var(--persimmon-900);
    --bg-on-boarding: var(--mirage-900);
    --bg-b-w: var(--mirage-200);
    --bg-beige-black: var(--mirage-600);
    /* Border */
    --border-color-gray: var(--mirage-500);
    --border-gray: .5px solid var(--mirage-400);
    --border-layer-0: .5px solid var(--mirage-500);
    --border-layer-1: .5px solid var(--mirage-300);
    --border-bottom: .5px solid var(--mirage-500);
    --border-selected: .5px solid var(--white);
    /* Arrow Blockquote */
    --arrow-color: var(--mirage-500);
    /* Tab */
    --settings-tab-hover: var(--mirage-700);
    /*Button*/
    --btn-bg-blue-secondary: var(--brand-blue-500);
    --btn-bg-blue-secondary-hover: var(--brand-blue-600);
    --btn-bg-gray-secondary: var(--mirage-600);
    --btn-bg-gray-secondary-hover: var(--mirage-500);
    --btn-bg-gray: var(--mirage-600);
    --btn-bg-gray-hover: var(--mirage-500);
    --btn-bg-sidebar: var(--transaparent);
    --btn-bg-sidebar-hover: var(--mirage-700);
    --btn-bg-sidebar-active: var(--brand-blue-900);
    --btn-text-sidebar-active: var(--brand-blue-200);
    --btn-text-sidebar: var(--mirage-100);
    --btn-b-w: #ffffff;
    --btn-b-w-hover: var(--vista-white-100);
    --btn-w-b: var(--mirage-700);
    /*Form*/
    --form-bg-white: var(--mirage-700);
    --form-bg: var(--mirage-700);
    --form-bg-1: var(--mirage-700);
    --form-bg-hover: var(--mirage-800);
    --form-border: .5px solid var(--mirage-500);
    --form-border-hover: .5px solid var(--mirage-200);
    --form-border-focus: .5px solid var(--mirage-100);
    --form-border-color-focus: var(--mirage-100);
    --form-border-1: 1px solid var(--mirage-300);
    /* Component Shadow*/
    --comp-shadow-layer-1: var(--shadow-none);
    --comp-shadow-layer-2: var(--shadow-white-reg-0);
    /* Component Bg*/
    --chat-list-bg-focus: var(--mirage-800);
    --chat-list-border: .5px solid var(--transaparent);
    --chat-list-border-focus: .5px solid var(--mirage-500);
    --bg-gradient-membership: linear-gradient(0deg, #2b3a44 23%, #2b3a444c 61%, #2b3a4400 63%);
    /*Image Filter*/
    --image-invert: brightness(0.5) invert(1);
}