/* ============================================================
   THEME VARIABLES - Single Source of Truth
   ============================================================
   This file defines ALL CSS custom properties for both themes.
   
   Architecture:
   - [data-theme="dark"] → Dark mode (default)
   - [data-theme="light"] → Light mode
   
   Usage:
   - Always reference variables like: var(--surface-1)
   - Never hardcode hex colors in component CSS
   - Add new variables here when extending the design system
   
   Categories:
   1. Surfaces (background layers)
   2. Text colors
   3. Trading colors (buy/sell)
   4. Status colors (success/danger/warning/info)
   5. Brand/Accent
   6. Borders
   7. Shadows
   8. Overlays & Backdrops
   9. Scrollbars
   10. Inputs & Forms
   11. Buttons
   12. Navigation
   13. Cards & Panels
   14. Tables & Grids
   15. Tooltips & Popovers
   16. Badges & Tags
   17. Modals & Dialogs
   18. Gradients
   19. Charts & Data Visualization
   20. Loading & Skeleton
   21. Transitions
   ============================================================ */

/* ============================================================
   DARK THEME (Default)
   ============================================================ */
[data-theme="dark"],
:root {
    /* --- Color Scheme Hint --- */
    color-scheme: dark;

    --primary-color: #f2c300;
    --secondary-color: #000000;

    --bg-primary: #f2c300;
    --bg-main: var(--secondary-color);

    /* ─── 1. SURFACES (Background layers, darkest → lightest) ─── */
    --surface-1: #0f0e09;
    --surface-2: #15130e;
    --surface-3: #1D1B16;
    --surface-4: #21201a;
    --surface-5: #2c2a24;
    --surface-6: #37352f;
    --surface-7: #434343;
    --surface-8: #525252;
    --surface-inset: #1b1b1b;
    --surface-modal: #272727;
    --surface-elevated: #303030;
    --surface-hovered: #303030;

    /* ─── 2. TEXT COLORS ─── */
    --text-primary: #ffffff;
    --text-secondary: #cbc6bd;
    --text-tertiary: #afafaf;
    --text-quaternary: #8a8580;
    --text-muted: #BCBCBC;
    --text-disabled: #5a5550;
    --text-hint: #888888;
    --text-placeholder: #6A6A6A;
    --text-inverse: #000000;
    --text-on-primary: #000000;
    --text-light-gray: #dedede;
    --text-subheader: #d1cfcf;
    --text-dark: #0c0c0c;
    --text-dark-blue: #1a2e35;
    --text-black: #000000;
    --text-white: #ffffff;
    --text-green: #54B054;
    --text-red: #DB575B;
    --text-offwhite: #fdfdfd80;
    --text-darkYellow-lightBlack: var(--primary-color);

    /* ─── 3. TRADING COLORS ─── */
    --color-buy: #05ddf9;
    --color-sell: #ff9a00;
    --color-buy-hover: #33e5fb;
    --color-sell-hover: #ffb340;
    --color-buy-bg: rgba(5, 221, 249, 0.15);
    --color-sell-bg: rgba(255, 154, 0, 0.15);
    --color-buy-gradient-start: rgba(5, 221, 249, 0.4);
    --color-buy-gradient-end: rgba(5, 221, 249, 0.1);
    --color-sell-gradient-start: rgba(255, 145, 0, 0.4);
    --color-sell-gradient-end: rgba(255, 145, 0, 0.1);
    --color-doller-buy-sell: #FFFF98;

    /* Same colors for both light and dark themes  */
    --color-green: #107C10;
    --color-red: #D13438;

    /* ─── 4. STATUS COLORS ─── */
    --color-success: #54b054;
    --color-danger: #db575b;
    --color-warning: #f2c300;
    --color-info: #05ddf9;

    --color-success-dark: #1e6b1e;
    --color-danger-dark: #d13438;
    --color-warning-dark: #7a6200;
    --color-info-dark: #004d5c;

    --color-success-bg: #107c10;
    --color-danger-bg: #d13438;
    --color-danger-bg-opacity: #D1343880;
    --color-warning-bg: #7a6200;
    --color-info-bg: #004d5c;
    --color-event-bullish: #034a03;
    --color-event-bearish: #6f0808;

    /* Error states (form validation) */
    --color-error: #db575b;
    --color-error-bright: #ff4444;
    --color-error-border: #db575b;
    --color-error-alt: #e36460;
    --color-error-dark: #dd3e39;
    --color-error-orange: #FF4500;
    --color-danger-severe: #E61845;

    /* Widget-specific status (TradingCentral) */
    --color-bullish: #107c10;
    --color-bearish: #e93933;
    --color-bearish-alt: #f39a01;
    --color-neutral: #f2c400;

    /* ─── 5. BRAND / ACCENT ─── */
    --color-primary: #f2c300;
    --color-primary-hover: #ffd633;
    --color-primary-active: #d4ab00;
    --color-primary-text: #000000;
    --color-primary-subtle: rgba(242, 195, 0, 0.15);

    /* Teal accent (technical signals) */
    --color-accent-teal: #2ebd85;
    --color-accent-blue: #2196f3;
    --color-link: #0252AB;
    --color-success-bright: #03e118;
    --color-sell-alt: #FA9C3E;

    /* ─── 6. BORDERS ─── */
    --border-default: #2c2a24;
    --border-subtle: #1d1b16;
    --border-input: #3b3933;
    --border-hover: #4a4840;
    --border-focus: #f2c300;
    --border-strong: #504747;
    --border-dark: #111111;
    --border-grid: #3b3b3b;
    --border-muted: #BCBCBC;
    --border-grey:#ebebeb21;
    --border-ring:#f2c300;

    /* ─── 7. SHADOWS ─── */
    --shadow-xs: 0 0 1px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0px 0px 16px 0px rgba(0, 0, 0, 0.70);
    --shadow-xl: 0px 8px 24px 0px rgba(0, 0, 0, 0.8);
    --shadow-2xl: 5px 5px 10px 2px rgba(0, 0, 0, 0.9);
    --shadow-card: 0px 0px 16px 0px rgba(0, 0, 0, 0.70);
    --shadow-modal: 0px 8px 24px 0px #000000CC;
    --shadow-dropdown: 0px 6px 60px rgba(0, 0, 0, 0.1);
    --shadow-focus-ring: 0 0 0 2px rgba(242, 195, 0, 0.2);
    --shadow-blue-ring: 0 0 1px #2196f3;
    --shadow-default: 0 0 16px 0 #00000033;
    --shadow-blur: 0px 0px 16px 0px #000000B2;

    /* ─── 8. OVERLAYS & BACKDROPS ─── */
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --overlay-backdrop: rgba(0, 0, 0, 0.4);
    --overlay-heavy: rgba(0, 0, 0, 0.7);

    /* ─── 9. SCROLLBARS ─── */
    --scrollbar-track: #272727;
    --scrollbar-thumb: #5e5e5e;
    --scrollbar-thumb-hover: #7a7a7a;

    /* ─── 10. INPUTS & FORMS ─── */
    --input-bg: var(--surface-3);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-primary);
    --input-border: var(--border-input);
    --input-border-valid: var(--border-muted);
    --input-border-error: var(--color-error-border);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: var(--shadow-focus-ring);

    /* ─── 11. BUTTONS ─── */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: #000000;
    --btn-primary-hover: var(--color-primary-hover);
    --btn-secondary-bg: var(--surface-5);
    --btn-secondary-text: var(--text-secondary);
    --btn-secondary-hover: var(--surface-6);
    --btn-disabled-bg: var(--surface-4);
    --btn-disabled-text: var(--text-disabled);
    --btn-danger-bg: var(--color-danger);
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #c0392b;

    /* ─── 12. NAVIGATION ─── */
    --nav-bg: var(--surface-4);
    --nav-wrapper-gradient: linear-gradient(180deg, #2C2A21, #21201A);
    --nav-border: var(--border-default);
    --nav-text: var(--text-secondary);
    --nav-text-active: var(--text-primary);
    --nav-indicator: var(--color-primary);

    /* ─── 13. CARDS & PANELS ─── */
    --card-bg: var(--surface-3);
    --card-border: var(--border-default);
    --card-hover-bg: var(--surface-4);
    --panel-bg: var(--surface-1);
    --panel-header-bg: var(--surface-3);

    --container-bg-1: var(--surface-1);
    --container-bg-2: var(--surface-3);
    --container-bg-3: var(--surface-3);
    --container-bg-4: var(--surface-4);
    --container-bg-5: var(--surface-3);
    --container-bg-6: var(--surface-4);
    --container-bg-7: var(--surface-4);

    --surface-dark3-light4: var(--surface-3);
    --surface-dark3-light2: var(--surface-3);
    --surface-dark4-light1: var(--surface-4);
    --surface-dark4-light3: var(--surface-4);
    --surface-dark4-light6: var(--surface-4);
    --surface-dark2-light1: var(--surface-2);
    --surface-dark5-light2: var(--surface-5);
    --surface-dark1-light4: var(--surface-1);
    --surface-dark1-light3: var(--surface-1);
    --surface-dark5-light4: var(--surface-5);
    --surface-dark6-light2: var(--surface-6);
    --surface-dark5-light3: var(--surface-5);
    --surface-dark1-light5: var(--surface-1);
    --surface-dark5-lightPrimary: var(--surface-5);
    --surface-dark7-lightPrimary: var(--surface-7);
    --surface-dark3-light5: var(--surface-3);
    --surface-dark5-light1: var(--surface-5);
    --surface-dark3-light1: var(--surface-3);
    --surface-dark2-light5: var(--surface-2);
    --surface-dark1-light2: var(--surface-1);
    --surface-dark4-light5: var(--surface-4);
    --surface-dark4-light2: var(--surface-4);

    /* ─── 14. TABLES & GRIDS ─── */
    --table-header-bg: var(--surface-4);
    --table-row-bg: transparent;
    --table-row-hover: var(--surface-4);
    --table-row-alt: var(--surface-2);
    --table-row-sub: #1b1b1b;
    --table-border: var(--border-default);
    --table-grid-border: var(--border-grid);

    /* ─── 15. TOOLTIPS & POPOVERS ─── */
    --tooltip-bg: var(--surface-6);
    --tooltip-text: var(--text-primary);
    --tooltip-border: var(--border-default);
    --popover-bg: var(--surface-modal);
    --popover-border: var(--border-default);

    /* ─── 16. BADGES & TAGS ─── */
    --badge-success-bg: rgba(84, 176, 84, 0.15);
    --badge-success-text: var(--color-success);
    --badge-danger-bg: rgba(219, 87, 91, 0.15);
    --badge-danger-text: var(--color-danger);
    --badge-warning-bg: rgba(242, 195, 0, 0.15);
    --badge-warning-text: var(--color-warning);
    --badge-info-bg: rgba(5, 221, 249, 0.15);
    --badge-info-text: var(--color-info);
    --badge-neutral-bg: var(--surface-5);
    --badge-neutral-text: var(--text-secondary);

    /* ─── 17. MODALS & DIALOGS ─── */
    --modal-bg: var(--surface-modal);
    --modal-border: var(--border-dark);
    --modal-shadow: var(--shadow-modal);
    --modal-header-border: var(--border-default);
    --modal-footer-border: var(--border-default);

    /* ─── 18. GRADIENTS ─── */
    --gradient-nav: linear-gradient(180deg, #2C2A21, #21201A);
    --gradient-header: linear-gradient(180deg, #37352f 0%, #2c2a24 100%);
    --gradient-headers-bg: linear-gradient(180deg, #21201a 0%, #1d1b16 100%);
    --gradient-deep: linear-gradient(#1d1b16, #0f0e09);
    --gradient-hover-accent: linear-gradient(#1d1b16, #f2c300);
    --gradient-menu: linear-gradient(#37352f, #2c2a24);
    --gradient-subtle: linear-gradient(180deg, var(--surface-4), var(--surface-3));
    --gradient-header-green:#1D1B16;

    /* ─── 19. CHARTS & DATA VISUALIZATION ─── */
    --chart-bg: var(--surface-1);
    --chart-grid: rgba(255, 255, 255, 0.05);
    --chart-grid-transparent: rgba(0, 0, 0, 0);
    --chart-label: #dedede;
    --chart-bar-fill: #FBDD40;
    --chart-line-primary: var(--color-primary);
    --chart-line-secondary: var(--color-buy);
    --chart-line-blue: #133B97;
    --chart-highlight: #FFDB5B;
    --chart-marker-neutral: #B2B0C5;
    --chart-toolbar-bg: #2a2e39;
    --chart-area-fill: rgba(242, 195, 0, 0.1);
    --chart-crosshair: var(--text-primary);
    --chart-focus-ring: var(--shadow-blue-ring);
    --chart-ellipse-1:#332D6C;
    --chart-ellipse-2:#9747FF;
    --chart-ellipse-3:#07CDA5;
    --chart-ellipse-4:#FF6A92;
    --chart-ellipse-5:#049DFA;
    --chart-ellipse-6:#FFCC00;
    --chart-ellipse-7:#372d04;

    /* ─── 20. LOADING & SKELETON ─── */
    --skeleton-base: var(--surface-4);
    --skeleton-shimmer: linear-gradient(to right, transparent, #c6c6c6, transparent);
    --loading-spinner: var(--color-primary);
    --hover-bg:#696969;

    /* ─── 21. TRANSITIONS ─── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    --tc-text-primary: #1A1A1A;
    --tc-surface-bg: #FFFFFF;
    --tc-surface-card: #292929;    /* Slightly off-white for inner elements */
    --tc-brand-primary: #2563EB;  /* Accents/buttons */
    --tc-bullish: #22C55E;
    --tc-bearish: #EF4444;
    --tc-neutral: #6B7280;

    /* colors with opacity for light theme; */
    --primary-color-30: #f2c3004d; /* 30% opacity */
    --primary-color-10: #f2c3001a; /* 10% opacity */

    /* Candles chart colors */
    --candle-bullish: #03e118;
    --candle-bearish: #ff4444;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
    /* --- Color Scheme Hint --- */
    color-scheme: light;

    --primary-color: #f2c300;
    --secondary-color: #ffffff;

   --bg-primary: #f2c300;
   --bg-main:var(--surface-5);

    /* ─── 1. SURFACES ─── */
    --surface-1: #ffffff;
    --surface-2: #F5F5F5;
    --surface-3: #EBEBEB;
    --surface-4: #e8e7e4;
    --surface-5: #E0E0E0;
    --surface-6: #CCCCCC;
    --surface-7: #b8b7b4;
    --surface-8: #a0a09d;
    --surface-inset: #f5f5f3;
    --surface-modal: #ffffff;
    --surface-elevated: #ffffff;
    --surface-hovered: #a0a09d;
    /* #CCCCCC */

    /* ─── 2. TEXT COLORS ─── */
    --text-primary: #000000;
    --text-secondary: #808080;
    --text-tertiary: #767676;
    --text-quaternary: #909090;
    --text-muted: #6a6a6a;
    --text-disabled: #a0a0a0;
    --text-hint: #999999;
    --text-placeholder: #4a4a4a;
    --text-inverse: #ffffff;
    --text-on-primary: #ffffff;
    --text-light-gray: #4a4a4a;
    --text-subheader: #555555;
    --text-dark: #1a1a1a;
    --text-dark-blue: #1a2e35;
    --text-black: #000000;
    --text-white: #ffffff;
    --text-green: #54B054;
    --text-red: #DB575B;
    --text-offwhite: #808080;
    --text-darkYellow-lightBlack: var(--text-black);

    /* ─── 3. TRADING COLORS ─── */
    --color-buy: #0099cc;
    --color-sell: #e68600;
    --color-buy-hover: #007aa8;
    --color-sell-hover: #cc7700;
    --color-buy-bg: rgba(0, 153, 204, 0.1);
    --color-sell-bg: rgba(230, 134, 0, 0.1);
    --color-buy-gradient-start: rgba(0, 153, 204, 0.3);
    --color-buy-gradient-end: rgba(0, 153, 204, 0.05);
    --color-sell-gradient-start: rgba(230, 134, 0, 0.3);
    --color-sell-gradient-end: rgba(230, 134, 0, 0.05);
    --color-doller-buy-sell: #FFFF98;
    
    /* Same colors for both light and dark themes  */
    --color-green: #107C10;
    --color-red: #D13438;

    /* ─── 4. STATUS COLORS ─── */
    --color-success: #107C10;
    --color-danger: #D13438;
    --color-warning: #c49b00;
    --color-info: #0088aa;

    --color-success-dark: #107c10;
    --color-danger-dark: #d13438;
    --color-warning-dark: #8a6e00;
    --color-info-dark: #006688;

    --color-success-bg: #107c10;
    --color-danger-bg: #d13438;
    --color-danger-bg-opacity: #D1343880;
    --color-warning-bg: #fff3cd;
    --color-info-bg: #d1ecf1;
    --color-event-bullish: transparent;
    --color-event-bearish: transparent;

    /* Error states */
    --color-error: #db575b;
    --color-error-bright: #ff4444;
    --color-error-border: #db575b;
    --color-error-alt: #e36460;
    --color-error-dark: #dd3e39;
    --color-error-orange: #FF4500;
    --color-danger-severe: #E61845;

    /* Widget-specific status */
    --color-bullish: #2d8a2d;
    --color-bearish: #c0392b;
    --color-bearish-alt: #cc7700;
    --color-neutral: #c49b00;

    /* ─── 5. BRAND / ACCENT ─── */
    --color-primary: #f2c300;
    --color-primary-hover: #ffd633;
    --color-primary-active: #d4ab00;
    --color-primary-text: #000000;
    --color-primary-subtle: rgba(242, 195, 0, 0.15);

    /* Teal accent */
    --color-accent-teal: #1a9e6b;
    --color-accent-blue: #1976d2;
    --color-link: #0252AB;
    --color-success-bright: #2e8b2e;
    --color-sell-alt: #cc7700;

    /* ─── 6. BORDERS ─── */
    --border-default: #e0dfdc;
    --border-subtle: #ebebeb;
    --border-input: #c8c7c4;
    --border-hover: #a8a7a4;
    --border-focus: #c49b00;
    --border-strong: #999999;
    --border-dark: #cccccc;
    --border-grid: #e0e0e0;
    --border-muted: #c8c7c4;
    --border-grey:#ebebeb;
    --border-ring:#000000;

    /* ─── 7. SHADOWS ─── */
    --shadow-xs: 0 0 1px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-focus-ring: 0 0 0 2px rgba(196, 155, 0, 0.2);
    --shadow-blue-ring: 0 0 1px #1976d2;
    --shadow-default: 0 0 16px 0 #00000033;
    --shadow-blur: 0px 0px 16px 0px #00000033;

    /* ─── 8. OVERLAYS & BACKDROPS ─── */
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --overlay-backdrop: rgba(0, 0, 0, 0.2);
    --overlay-heavy: rgba(0, 0, 0, 0.5);

    /* ─── 9. SCROLLBARS ─── */
    --scrollbar-track: #f0f0f0;
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-thumb-hover: #a0a0a0;

    /* ─── 10. INPUTS & FORMS ─── */
    --input-bg: var(--surface-3);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-black);
    --input-border: var(--border-input);
    --input-border-valid: var(--border-muted);
    --input-border-error: var(--color-error-border);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: var(--shadow-focus-ring);

    /* ─── 11. BUTTONS ─── */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--color-primary-hover);
    --btn-secondary-bg: var(--surface-4);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: var(--surface-5);
    --btn-disabled-bg: var(--surface-3);
    --btn-disabled-text: var(--text-disabled);
    --btn-danger-bg: var(--color-danger);
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #a93226;

    /* ─── 12. NAVIGATION ─── */
    --nav-bg: #ffffff;
    --nav-wrapper-gradient: linear-gradient(180deg, #f0efed, #e8e7e4);
    --nav-border: var(--border-default);
    --nav-text: var(--text-secondary);
    --nav-text-active: var(--text-primary);
    --nav-indicator: var(--color-primary);

    /* ─── 13. CARDS & PANELS ─── */
    --card-bg: #ffffff;
    --card-border: var(--border-default);
    --card-hover-bg: var(--surface-2);
    --panel-bg: #ffffff;
    --panel-header-bg: var(--surface-3);

    --container-bg-1: var(--surface-2);
    --container-bg-2: var(--surface-4);
    --container-bg-3: var(--surface-1);
    --container-bg-4: var(--surface-2);
    --container-bg-5: var(--surface-2);
    --container-bg-6: var(--surface-1);
    --container-bg-7: var(--surface-6);


    /* merge suphase varibles */

    --surface-dark3-light4: var(--surface-4);
    --surface-dark3-light2: var(--surface-2);
    --surface-dark4-light1: var(--surface-1);
    --surface-dark4-light3: var(--surface-3);
    --surface-dark4-light6: var(--surface-6);
    --surface-dark2-light1: var(--surface-1);
    --surface-dark5-light2: var(--surface-2);
    --surface-dark1-light4: var(--surface-4);
    --surface-dark1-light3: var(--surface-3);
    --surface-dark5-light4: var(--surface-4);
    --surface-dark6-light2: var(--surface-2);
    --surface-dark5-light3: var(--surface-3);
    --surface-dark1-light5: var(--surface-5);
    --surface-dark5-lightPrimary: var(--bg-primary);
    --surface-dark7-lightPrimary: var(--bg-primary);
    --surface-dark3-light5: var(--surface-5);
    --surface-dark5-light1: var(--surface-1);
    --surface-dark3-light1: var(--surface-1);
    --surface-dark2-light5:var(--surface-5);
    --surface-dark1-light2: var(--surface-2);
    --surface-dark4-light5: var(--surface-5);
    --surface-dark4-light2: var(--surface-2);

    /* ─── 14. TABLES & GRIDS ─── */
    --table-header-bg: var(--surface-3);
    --table-row-bg: transparent;
    --table-row-hover: var(--surface-2);
    --table-row-alt: var(--surface-2);
    --table-row-sub: var(--surface-2);
    --table-border: var(--border-default);
    --table-grid-border: var(--border-grid);

    /* ─── 15. TOOLTIPS & POPOVERS ─── */
    --tooltip-bg: #1a1a1a;
    --tooltip-text: #ffffff;
    --tooltip-border: transparent;
    --popover-bg: #ffffff;
    --popover-border: var(--border-default);

    /* ─── 16. BADGES & TAGS ─── */
    --badge-success-bg: rgba(45, 138, 45, 0.1);
    --badge-success-text: var(--color-success);
    --badge-danger-bg: rgba(192, 57, 43, 0.1);
    --badge-danger-text: var(--color-danger);
    --badge-warning-bg: rgba(196, 155, 0, 0.1);
    --badge-warning-text: var(--color-warning);
    --badge-info-bg: rgba(0, 136, 170, 0.1);
    --badge-info-text: var(--color-info);
    --badge-neutral-bg: var(--surface-4);
    --badge-neutral-text: var(--text-secondary);

    /* ─── 17. MODALS & DIALOGS ─── */
    --modal-bg: #ffffff;
    --modal-border: var(--border-default);
    --modal-shadow: var(--shadow-modal);
    --modal-header-border: var(--border-default);
    --modal-footer-border: var(--border-default);

    /* ─── 18. GRADIENTS ─── */
    --gradient-nav: var(--surface-1);
    --gradient-header: var(--surface-2);
    --gradient-headers-bg: var(--surface-1);
    --gradient-deep: var(--surface-1);
    --gradient-hover-accent: linear-gradient(#f0efed, #c49b00);
    --gradient-menu: linear-gradient(#f8f7f5, #f0efed);
    --gradient-subtle: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    --gradient-header-green:#107C1033;

    /* ─── 19. CHARTS & DATA VISUALIZATION ─── */
    --chart-bg: #ffffff;
    --chart-grid: rgba(0, 0, 0, 0.06);
    --chart-grid-transparent: rgba(0, 0, 0, 0);
    --chart-label: #4a4a4a;
    --chart-bar-fill: #c49b00;
    --chart-line-primary: var(--color-primary);
    --chart-line-secondary: var(--color-buy);
    --chart-line-blue: #1a4db2;
    --chart-highlight: #e6c44e;
    --chart-marker-neutral: #8886a0;
    --chart-toolbar-bg: #f0f1f3;
    --chart-area-fill: rgba(196, 155, 0, 0.08);
    --chart-crosshair: var(--text-primary);
    --chart-focus-ring: var(--shadow-blue-ring);
    --chart-ellipse-1:#332D6C;
    --chart-ellipse-2:#9747FF;
    --chart-ellipse-3:#07CDA5;
    --chart-ellipse-4:#FF6A92;
    --chart-ellipse-5:#049DFA;
    --chart-ellipse-6:#FFCC00;
    --chart-ellipse-7:#dfd197;

    /* ─── 20. LOADING & SKELETON ─── */
    --skeleton-base: var(--surface-3);
    --skeleton-shimmer: linear-gradient(to right, transparent, #e0e0e0, transparent);
    --loading-spinner: var(--color-primary);
    --hover-bg: #DCDCDC;

    --tc-text-primary: #F3F4F6;
    --tc-surface-bg: #111827;
    --tc-surface-card: #D6D6D6;
      /* Lighter dark gray for inner elements */
    --tc-brand-primary: #3B82F6;  /* Vibrant accent for dark mode */
    --tc-bullish: #10B981;
    --tc-bearish: #F87171;
    --tc-neutral: #9CA3AF;

    /* colors with opacity for light theme; */
    --primary-color-30: #f2c3004d; /* 30% opacity */
    --primary-color-10: #f2c3001a; /* 10% opacity */

    /* Candles chart colors */
    --candle-bullish: #107c10;
    --candle-bearish: #d13438;

}

/* ============================================================
   THEME-RESPONSIVE SVG ICONS (for <img> tags)
   ============================================================
   Add class "theme-icon" to any <img> that uses an SVG path
   to make it respond to theme color changes.
   ============================================================ */

/* Dark theme - SVG icons render white */
[data-theme="dark"] img.theme-icon:not(.normal-icon) {
    filter: brightness(0) invert(1);
}

/* Light theme - SVG icons render dark */
[data-theme="light"] img.theme-icon:not(.normal-icon) {
    filter: brightness(0);
}

/* light overlay */
/* Dark theme - SVG icons render offwhite */
[data-theme="light"] img.theme-icon-offwhite:not(.normal-icon) {
    filter: brightness(0) invert(0.8);
}

/* Light theme - SVG icons render dark */
[data-theme="dark"] img.theme-icon-offwhite:not(.normal-icon) {
    filter: brightness(0.8);
}

/* Dark theme - SVG icons render white */
[data-theme="dark"] img.theme-icon-inverse:not(.normal-icon) {
    filter: brightness(0);
}

/* Light theme - SVG icons render dark */
[data-theme="light"] img.theme-icon-inverse:not(.normal-icon) {
        filter: brightness(0) invert(1);
}

[data-theme="light"] .nav__searchbox-inputcocpit {
        background-image: url("/Content/icons/search-light.svg");
}

/* Light theme - SVG icons render dark */
[data-theme="dark"] img.GridEditButton:not(.normal-icon) {
        filter: brightness(0) invert(1);
}

[data-theme="light"] img.GridEditButton:not(.normal-icon) {
        filter: brightness(0);
}

/* Light theme - SVG icons render dark */
[data-theme="dark"] img.GridMenuButton:not(.normal-icon) {
        filter: brightness(0) invert(1);
}

[data-theme="light"] img.GridMenuButton:not(.normal-icon) {
        filter: brightness(0);
}