:root {

    --dback: #F9FAFB;
    --dwhite: #FFF;
    --dyellow: #EFBE0F;


    --blue: #202020;
    /*--blue: #3862DD;*/
    --textColor: #000000;
    --white: #fff;
    --gray: #949494;
    --lightGray: #E0E0E0;
    --green: #0A817F;
    --lightBlue: #e6f8f2;
    --lightBlueAlpha: rgba(56, 98, 221, 0.17);


    --menu: #d9d8d8;
    --subMenu: #f2f2f2;
    --mainContent: #f6f6f6;
    --activeTitle: #f2f5f9;
    --footer: #e5e9ef;
    --cardBody: #fff;
    --cardBodyAlpha: #ffffff8f;
    --cardHeader: #e7e7e7;
    --cardHeaderAlpha: #e7e7e78a;
    --container: #eafbff;
    --activeTab: #007bff;
    --activeLi: #3030300d;
    --deActive: #2e2e39;
    --tableRow: #e2e9f978;
    --cardBorder: #e7e7e7;
    --borderBottom: #dcdcdc;
    --scrollBar: #0707073b;
    --tableHeader: #f9f9f9;
    --toolTipBG: #d8d8d8e6;
    --popupAlpha: #f0f0f0e6;
    --black: #0707073b;

    --greenAlpha: #18a97978;
    --greenAlphaGradient: #09a16e85;
    --darkGreen: #18a979;
    --blackGreen: #123f30;
    --red: #d73e36;
    --blackRed: #79150f;
    --redAlpha: #d73e3678;
    --redAlphaGradient: #e124175e;
    --darkRed: #d73e36;
    --orange: #ff8124;
    --blackOrange: #e36407;
    --orangeAlpha: #e97b50b0;

    /* ---- shadcn/ui design tokens (KuCoin-inspired), stored as raw "H S% L%" ---- */
    --background: 180 14% 97%;
    --foreground: 206 15% 9%;

    --card: 0 0% 100%;
    --card-foreground: 206 15% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 206 15% 9%;

    --primary: 167 67% 41%;
    --primary-foreground: 0 0% 100%;

    --secondary: 168 17% 94%;
    --secondary-foreground: 206 15% 9%;

    --muted: 168 17% 94%;
    --muted-foreground: 209 9% 46%;

    --accent: 163 47% 93%;
    --accent-foreground: 206 15% 9%;

    --destructive: 353 91% 62%;
    --destructive-foreground: 0 0% 100%;

    --success: 160 87% 43%;
    --success-foreground: 163 79% 8%;

    --warning: 37 91% 55%;
    --warning-foreground: 41 100% 5%;

    --border: 170 12% 90%;
    --input: 170 12% 90%;
    --ring: 167 67% 41%;

    --radius: 1rem;
}

.dark {
    --menu: #24242e;
    --subMenu: #24242e;
    --mainContent: #383a59;
    --activeTitle: #11121552;
    --footer: #252531;
    --cardBody: #282a36;
    --cardBodyAlpha: #282a36e6;
    --cardHeader: #242633fa;
    --cardHeaderAlpha: #11121552;
    --container: #383a59;
    --activeTab: #007bff;
    --activeLi: #d0d0d01a;
    --deActive: #2e2e39;
    --tableRow: #38384678;
    --cardBorder: #22232a;
    --borderBottom: #242633;
    --scrollBar: #a9a9a936;
    --tableHeader: #262938;
    --toolTipBG: #242433f0;
    --popupAlpha: #24242ef2;
    --textColor: #ecececc7;
    --white: #444444;
    --black: #f9f9f9;
    --gray: #8e8e8e;
    --green: #50fa7ba1;
    --greenAlpha: #18a97978;
    --greenAlphaGradient: #31cc6a4d;
    --darkGreen: #18a979;
    --blackGreen: #123f30;
    --red: #ff5555;
    --blackRed: #79150f;
    --redAlpha: #d73e3678;
    --redAlphaGradient: #e8201236;
    --darkRed: #d73e36;
    --orange: #ff8124;
    --blackOrange: #e36407;
    --orangeAlpha: #b16649d9;
    --blue: #202020;
    --lightBlue: #e6f8f2;

    /* ---- shadcn/ui design tokens (layered dark — premium fintech) ---- */
    /* page ~#111827, card ~#18212F, input/muted ~#1F2937 */
    --background: 222 47% 11%;
    --foreground: 210 20% 96%;

    --card: 217 33% 14%;
    --card-foreground: 210 20% 96%;
    --popover: 217 33% 14%;
    --popover-foreground: 210 20% 96%;

    --primary: 166 64% 46%;
    --primary-foreground: 0 0% 100%;

    --secondary: 215 28% 17%;
    --secondary-foreground: 210 20% 96%;

    --muted: 215 28% 17%;
    --muted-foreground: 215 12% 65%;

    --accent: 167 40% 16%;
    --accent-foreground: 210 20% 96%;

    --destructive: 353 91% 62%;
    --destructive-foreground: 0 0% 100%;

    --success: 160 87% 43%;
    --success-foreground: 163 79% 8%;

    --warning: 37 91% 55%;
    --warning-foreground: 41 100% 5%;

    --border: 215 18% 22%;
    --input: 215 28% 17%;
    --ring: 166 64% 46%;

    --radius: 1rem;
}

/*
 * Legacy variable names (used across ~150 pre-existing component stylesheets)
 * re-pointed at the new KuCoin-teal token system, so the whole app renders
 * from one consistent palette without having to touch every stylesheet.
 * Comes after the blocks above on purpose - same specificity, later wins.
 */
:root, .dark {
    --blue: hsl(var(--primary));
    --activeTab: hsl(var(--primary));
    --textColor: hsl(var(--foreground));
    --white: #ffffff;
    --black: hsl(var(--foreground) / 0.7);
    --gray: hsl(var(--muted-foreground));
    --lightGray: hsl(var(--border));
    --dyellow: hsl(var(--warning));

    --menu: hsl(var(--muted));
    --subMenu: hsl(var(--muted));
    --mainContent: hsl(var(--background));
    --activeTitle: hsl(var(--accent));
    --footer: hsl(var(--muted));
    --cardBody: hsl(var(--card));
    --cardBodyAlpha: hsl(var(--card) / 0.92);
    --cardHeader: hsl(var(--border));
    --cardHeaderAlpha: hsl(var(--border) / 0.7);
    --container: hsl(var(--accent));
    --activeLi: hsl(var(--foreground) / 0.05);
    --deActive: hsl(var(--muted-foreground));
    --tableRow: hsl(var(--muted) / 0.6);
    --cardBorder: hsl(var(--border));
    --borderBottom: hsl(var(--border));
    --scrollBar: hsl(var(--foreground) / 0.2);
    --tableHeader: hsl(var(--muted));
    --toolTipBG: hsl(var(--foreground) / 0.9);
    --popupAlpha: hsl(var(--card) / 0.92);

    --green: hsl(var(--success));
    --greenAlpha: hsl(var(--success) / 0.47);
    --greenAlphaGradient: hsl(var(--success) / 0.52);
    --darkGreen: hsl(var(--success));
    --blackGreen: hsl(var(--success-foreground));

    --red: hsl(var(--destructive));
    --blackRed: hsl(var(--destructive-foreground));
    --redAlpha: hsl(var(--destructive) / 0.47);
    --redAlphaGradient: hsl(var(--destructive) / 0.37);
    --darkRed: hsl(var(--destructive));

    --orange: hsl(var(--warning));
    --blackOrange: hsl(var(--warning-foreground));
    --orangeAlpha: hsl(var(--warning) / 0.69);

    --lightBlue: hsl(var(--primary) / 0.1);
    --lightBlueAlpha: hsl(var(--primary) / 0.12);
}