:root {

    --accent-color: #2563eb;
    --accent-base: #356eea;
    --accent-hover: #1d4ed8;
    --accent-light: rgba(37, 99, 235, 0.08);

    --bg-primary: #FFFFFF;
    --bg-primary-light: #FFFFFF;
    --bg-primary-lighter: #FFFFFF;
    --bg-primary-dark: #FFFFFF;
    --bg-primary-darker: #FFFFFF;

    --bg-accent: #1e5ef3;        /* Your core professional brand blue */
    --bg-accent-light: #4c82f7;   /* Elevated shade (great for hover states) */
    --bg-accent-lighter: #89aef9; /* Softened tone (great for borders or secondary icons) */
    --bg-accent-dark: #1247cb;    /* Deepened shade (great for active/pressed states) */
    --bg-accent-darker: #0b3299;  /* Deep shadow/contrast shade */

    --bg-lighter:#FFFFFF11;

    --text-primary: #333333;
    --text-primary-muted: #777777;
    --text-primary-bright: #000000;

    --text-accent: #ffffff;
    --text-accent-muted: #ffffff;
    --text-accent-bright: #ffffff;


    --bg-app: #2563eb;
    --bg-panel: #427dff;
    --bg-card: #FFFFFF;
    --bg-content: #FFFFFF;
    --bg-chat: #ffffff;

    --border-panel: 1px solid #00000033;
    --border-card: 1px solid #00000033;
    --border-content: 1px solid #00000033;
    --border-chat: 1px solid #00000033;

    --text-main: #0f172a;
    --text-muted: #334155;
    --text-light: #64748b;
    --text-white: #FFFFFF;


    --border-color: #94a3b8;
    --border-light: #e2e8f0;

    --shadow-depth: 0 4px 6px -1px rgba(0, 0, 0, 0.6);

    --system-crimson: #dc2626;
    --system-bg: #fef2f2;
    --self-color: #2563eb;

    --body-gradient-start: #427dff;
    --body-gradient-end: #194ec2;

    --color-white: #FFFFFF;
    --color-white-10t: #FFFFFF1A;
    --color-white-20t: #FFFFFF33;
    --color-white-30t: #FFFFFF4D;
    --color-white-40t: #FFFFFF66;
    --color-white-50t: #FFFFFF80;
    --color-white-60t: #FFFFFF99;
    --color-white-70t: #FFFFFFB3;
    --color-white-80t: #FFFFFFCC;
    --color-white-90t: #FFFFFFE6;

    --color-black: #000000;
    --color-black-10t: #0000001A;
    --color-black-20t: #00000033;
    --color-black-30t: #0000004D;
    --color-black-40t: #00000066;
    --color-black-50t: #00000080;
    --color-black-60t: #00000099;
    --color-black-70t: #000000B3;
    --color-black-80t: #000000CC;
    --color-black-90t: #000000E6;

    /* Blue */
    --color-blue: #0d6efd;
    --color-blue-100: #cfe2ff;
    --color-blue-200: #9ec5fe;
    --color-blue-300: #6ea8fe;
    --color-blue-400: #3d8bfd;
    --color-blue-500: #0d6efd;
    --color-blue-600: #0a58ca;
    --color-blue-700: #084298;
    --color-blue-800: #052c65;
    --color-blue-900: #031633;

    /* Indigo */
    --color-indigo: #6610f2;
    --color-indigo-100: #e0cffc;
    --color-indigo-200: #c19ffa;
    --color-indigo-300: #a270f8;
    --color-indigo-400: #8340f5;
    --color-indigo-500: #6610f2;
    --color-indigo-600: #520dc2;
    --color-indigo-700: #3d0a91;
    --color-indigo-800: #290661;
    --color-indigo-900: #140330;

    /* Purple */
    --color-purple: #6f42c1;
    --color-purple-100: #e2d9f3;
    --color-purple-200: #c5b3e7;
    --color-purple-300: #a98cdb;
    --color-purple-400: #8c66cf;
    --color-purple-500: #6f42c1;
    --color-purple-600: #59359a;
    --color-purple-700: #432874;
    --color-purple-800: #2c1a4d;
    --color-purple-900: #160d27;


    --color-cyan: #0dcaf0;
    --color-cyan-100: #aaefff;
    --color-cyan-200: #84e6fc;
    --color-cyan-300: #61ddf8;
    --color-cyan-400: #3ddcff;
    --color-cyan-500: #0dcaf0;
    --color-cyan-600: #00aed0;
    --color-cyan-700: #0088a2;
    --color-cyan-800: #006779;
    --color-cyan-900: #004450;

    --color-pink: #d63384;
    --color-pink-100: #f7d6e6;
    --color-pink-200: #efadce;
    --color-pink-300: #e785b5;
    --color-pink-400: #de5c9d;
    --color-pink-500: #d63384;
    --color-pink-600: #ab296a;
    --color-pink-700: #801f4f;
    --color-pink-800: #561435;
    --color-pink-900: #2b0a1a;

    --color-red: #dc3545;
    --color-red-100: #f8d7da;
    --color-red-200: #f1aeb5;
    --color-red-300: #ea868f;
    --color-red-400: #e35d6a;
    --color-red-500: #dc3545;
    --color-red-600: #b02a37;
    --color-red-700: #842029;
    --color-red-800: #58151c;
    --color-red-900: #2c0b0e;

    --color-orange: #fd7e14;
    --color-orange-100: #ffe5d0;
    --color-orange-200: #ffcca1;
    --color-orange-300: #ffb272;
    --color-orange-400: #ff9943;
    --color-orange-500: #fd7e14;
    --color-orange-600: #ca6510;
    --color-orange-700: #984c0c;
    --color-orange-800: #653208;
    --color-orange-900: #331904;

    /* Yellow */
    --color-yellow: #ffc107;
    --color-yellow-100: #fff3cd;
    --color-yellow-200: #ffe69c;
    --color-yellow-300: #ffda6a;
    --color-yellow-400: #ffcd39;
    --color-yellow-500: #ffc107;
    --color-yellow-600: #cc9a06;
    --color-yellow-700: #997404;
    --color-yellow-800: #664d03;
    --color-yellow-900: #332701;

    /* Green */
    --color-green: #198754;
    --color-green-100: #d1e7dd;
    --color-green-200: #a3cfbb;
    --color-green-300: #75b798;
    --color-green-400: #4bad75;
    --color-green-500: #198754;
    --color-green-600: #146c43;
    --color-green-700: #0f5132;
    --color-green-800: #0a3622;
    --color-green-900: #051b11;

    /* Teal */
    --color-teal: #20c997;
    --color-teal-100: #d2f4eb;
    --color-teal-200: #a6ebd7;
    --color-teal-300: #79e1c3;
    --color-teal-400: #4cd8af;
    --color-teal-500: #20c997;
    --color-teal-600: #1a1a4d; /* fixed */
    --color-teal-600: #19a179;
    --color-teal-700: #13785b;
    --color-teal-800: #0d503c;
    --color-teal-900: #06281e;

    /* Gray */
    --color-gray: #adb5bd;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* Slate */
    --color-slate: #64748b;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
}