/* ========================================================================
   Theme Variables — Light (default) & Dark palettes
   ======================================================================== */

:root {
    /* Body & content */
    --cd-body-bg: #f2f3f8;
    --cd-content-bg: #f2f3f8;
    --cd-card-bg: #ffffff;

    /* Text */
    --cd-text-primary: #212121;
    --cd-text-secondary: #80808F;
    --cd-text-muted: #B5B5C3;
    --cd-text-dark: #181C32;
    --cd-text-dark-50: #7E8299;
    --cd-text-dark-75: #3F4254;

    /* Borders & dividers */
    --cd-border-color: #EBEDF3;
    --cd-separator-color: #EBEDF3;

    /* Inputs */
    --cd-input-bg: #ffffff;
    --cd-input-border: #E4E6EF;
    --cd-input-color: #3F4254;
    --cd-input-placeholder: #B5B5C3;
    --cd-input-disabled-bg: #F3F6F9;

    /* Tables */
    --cd-table-bg: #ffffff;
    --cd-table-border: #EBEDF3;
    --cd-table-stripe-bg: #f7f7f7;
    --cd-table-hover-bg: #F3F6F9;
    --cd-thead-bg: #F3F6F9;
    --cd-thead-color: #3F4254;

    /* Modals */
    --cd-modal-bg: #ffffff;
    --cd-modal-header-bg: #ffffff;
    --cd-modal-footer-bg: #ffffff;
    --cd-modal-header-border: #EBEDF3;
    --cd-modal-footer-border: #EBEDF3;

    /* Dropdown */
    --cd-dropdown-bg: #ffffff;
    --cd-dropdown-border: #E4E6EF;
    --cd-dropdown-hover-bg: #F3F6F9;

    /* Header */
    --cd-header-bg: #ffffff;
    --cd-header-border: #EBEDF3;

    /* Shadows */
    --cd-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
    --cd-shadow-lg: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);

    /* Misc */
    --cd-json-bg: #ffffff;
    --cd-json-color: #212121;
    --cd-label-light-bg: #F3F6F9;
    --cd-alert-info-bg: #E1F0FF;
    --cd-alert-info-border: #B8DAFF;
    --cd-alert-info-color: #004085;

    /* Semantic */
    --cd-discrepancy-color: #F64E60;
    --cd-negative-color: rgb(255, 51, 51);
    --cd-link-color: #0366d6;

    /* Navi items */
    --cd-navi-link-bg-hover: #F3F6F9;
    --cd-navi-text-color: #3F4254;

    /* Tabs */
    --cd-nav-tabs-border: #EBEDF3;
    --cd-nav-tabs-link-color: #7E8299;
    --cd-nav-tabs-link-active-color: #3699FF;
    --cd-nav-tabs-link-active-border: #3699FF;

    /* Badges */
    --cd-badge-light-bg: #F3F6F9;
    --cd-badge-light-color: #7E8299;

    /* Progress bars */
    --cd-progress-bg: #EBEDF3;

    /* Symbol/Avatar */
    --cd-symbol-light-bg: #F3F6F9;

    /* Offcanvas/Quick panels */
    --cd-offcanvas-bg: #ffffff;
    --cd-offcanvas-header-border: #EBEDF3;

    /* Metronic bg-light variants */
    --cd-bg-light: #F3F6F9;
    --cd-bg-light-primary: rgba(54, 153, 255, 0.1);
    --cd-bg-light-success: rgba(27, 197, 189, 0.1);
    --cd-bg-light-info: rgba(54, 153, 255, 0.1);
    --cd-bg-light-warning: rgba(255, 168, 0, 0.1);
    --cd-bg-light-danger: rgba(246, 78, 96, 0.1);
    --cd-bg-light-dark: rgba(24, 28, 50, 0.1);

    /* Switch toggle */
    --cd-switch-bg: #EBEDF3;
    --cd-switch-checked-bg: #3699FF;

    /* Breadcrumb */
    --cd-breadcrumb-color: #B5B5C3;
    --cd-breadcrumb-active-color: #3F4254;

    /* Theme toggle button */
    --cd-theme-toggle-color: #B5B5C3;
    --cd-theme-toggle-hover-color: #3699FF;

    /* btn-light-primary text in dark mode */
    --cd-btn-light-primary-color: #3699FF;
}

html[data-theme="dark"] {
    /* Body & content — softer charcoal, not deep navy */
    --cd-body-bg: #1e1e2d;
    --cd-content-bg: #1e1e2d;
    --cd-card-bg: #2d2d3f;

    /* Text — brighter for better readability */
    --cd-text-primary: #ededf0;
    --cd-text-secondary: #a7a7b8;
    --cd-text-muted: #8585a0;
    --cd-text-dark: #ededf0;
    --cd-text-dark-50: #b8b8ca;
    --cd-text-dark-75: #d8d8e6;

    /* Borders & dividers — lighter for visibility */
    --cd-border-color: #3e3e55;
    --cd-separator-color: #3e3e55;

    /* Inputs — lighter backgrounds */
    --cd-input-bg: #2d2d3f;
    --cd-input-border: #4a4a62;
    --cd-input-color: #e0e0ec;
    --cd-input-placeholder: #7a7a95;
    --cd-input-disabled-bg: #353548;

    /* Tables */
    --cd-table-bg: #2d2d3f;
    --cd-table-border: #3e3e55;
    --cd-table-stripe-bg: #33334a;
    --cd-table-hover-bg: #3a3a50;
    --cd-thead-bg: #353548;
    --cd-thead-color: #d8d8e6;

    /* Modals */
    --cd-modal-bg: #2d2d3f;
    --cd-modal-header-bg: #353548;
    --cd-modal-footer-bg: #353548;
    --cd-modal-header-border: #3e3e55;
    --cd-modal-footer-border: #3e3e55;

    /* Dropdown */
    --cd-dropdown-bg: #2d2d3f;
    --cd-dropdown-border: #4a4a62;
    --cd-dropdown-hover-bg: #3a3a50;

    /* Header */
    --cd-header-bg: #2d2d3f;
    --cd-header-border: #3e3e55;

    /* Shadows — subtler */
    --cd-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    --cd-shadow-lg: 0px 0px 50px 0px rgba(0, 0, 0, 0.35);

    /* Misc */
    --cd-json-bg: #33334a;
    --cd-json-color: #e0e0ec;
    --cd-label-light-bg: #353548;
    --cd-alert-info-bg: #253550;
    --cd-alert-info-border: #355570;
    --cd-alert-info-color: #8ab4f8;

    /* Semantic */
    --cd-discrepancy-color: #ff6b7a;
    --cd-negative-color: #ff6b6b;
    --cd-link-color: #58a6ff;

    /* Navi items */
    --cd-navi-link-bg-hover: #3a3a50;
    --cd-navi-text-color: #d8d8e6;

    /* Tabs */
    --cd-nav-tabs-border: #3e3e55;
    --cd-nav-tabs-link-color: #b8b8ca;
    --cd-nav-tabs-link-active-color: #3699FF;
    --cd-nav-tabs-link-active-border: #3699FF;

    /* Badges */
    --cd-badge-light-bg: #353548;
    --cd-badge-light-color: #b8b8ca;

    /* Progress bars */
    --cd-progress-bg: #3e3e55;

    /* Symbol/Avatar */
    --cd-symbol-light-bg: #353548;

    /* Offcanvas/Quick panels */
    --cd-offcanvas-bg: #2d2d3f;
    --cd-offcanvas-header-border: #3e3e55;

    /* Metronic bg-light variants — slightly more visible */
    --cd-bg-light: #353548;
    --cd-bg-light-primary: rgba(54, 153, 255, 0.18);
    --cd-bg-light-success: rgba(27, 197, 189, 0.18);
    --cd-bg-light-info: rgba(54, 153, 255, 0.18);
    --cd-bg-light-warning: rgba(255, 168, 0, 0.18);
    --cd-bg-light-danger: rgba(246, 78, 96, 0.18);
    --cd-bg-light-dark: rgba(224, 224, 224, 0.12);

    /* Switch toggle */
    --cd-switch-bg: #4a4a62;
    --cd-switch-checked-bg: #3699FF;

    /* Breadcrumb */
    --cd-breadcrumb-color: #8585a0;
    --cd-breadcrumb-active-color: #d8d8e6;

    /* Theme toggle button */
    --cd-theme-toggle-color: #6c6c80;
    --cd-theme-toggle-hover-color: #ffc107;

    /* btn-light-primary text in dark mode */
    --cd-btn-light-primary-color: #8ab4f8;
}