/* Theme Variables - Light Mode (default) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f3f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8f9ff;
    --bg-header: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --bg-sidebar: #ffffff;
    --bg-footer: #f8f9fa;
    --bg-overlay: rgba(0, 0, 0, 0.3);

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #868e96;
    --text-light: #adb5bd;
    --text-accent: #1e3c72;
    --text-success: #2b8a3e;
    --text-danger: #c92a2a;

    --border-color: #e9ecef;
    --border-light: #f1f3f5;
    --border-input: #dee2e6;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(30, 60, 114, 0.12);

    --accent: #1e3c72;
    --accent-light: #2a5298;
    --accent-bg: #e7f0ff;
    --accent-bg-hover: #f0f4ff;

    --computed-bg: #f0f4ff;
    --computed-border: #d0daf0;

    --table-header-bg: #1e3c72;
    --table-header-text: #ffffff;
    --table-row-hover: #f8f9ff;
    --table-border: #f1f3f5;
    --table-footer-bg: #1e3c72;
    --table-footer-text: #ffffff;

    --closed-bg: #f8f9fa;
    --closed-text: #adb5bd;

    --badge-bg: #e9ecef;
    --badge-text: #495057;

    --tag-bg: #e7f5ff;
    --tag-text: #1e3c72;

    --warning-bg: #fff3cd;
    --warning-border: #ffc107;
    --warning-text: #664d03;

    --error-bg: #fff5f5;
    --error-border: #fcc2c2;
    --error-text: #c92a2a;

    --success-bg: #e6f9ed;
    --success-text: #2b8a3e;

    --store-selector-bg: #ffffff;
    --store-selector-text: #212529;
    --store-selector-border: #e9ecef;
    --store-selector-icon: #1e3c72;
}

/* Dark Mode */
body.dark-theme {
    --bg-primary: #1a1d23;
    --bg-secondary: #22262d;
    --bg-tertiary: #2a2f38;
    --bg-card: #22262d;
    --bg-input: #2a2f38;
    --bg-hover: #2a2f38;
    --bg-header: linear-gradient(135deg, #0f1923 0%, #162033 100%);
    --bg-sidebar: #1a1d23;
    --bg-footer: #1a1d23;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #e4e6ea;
    --text-secondary: #b0b8c4;
    --text-muted: #7a8494;
    --text-light: #555d6b;
    --text-accent: #7cacf8;
    --text-success: #51cf66;
    --text-danger: #ff6b6b;

    --border-color: #333842;
    --border-light: #2a2f38;
    --border-input: #3d4350;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);

    --accent: #7cacf8;
    --accent-light: #5b93e8;
    --accent-bg: #1c2840;
    --accent-bg-hover: #233350;

    --computed-bg: #1c2840;
    --computed-border: #2a3a5c;

    --table-header-bg: #162033;
    --table-header-text: #b0c4e8;
    --table-row-hover: #282d36;
    --table-border: #2a2f38;
    --table-footer-bg: #162033;
    --table-footer-text: #b0c4e8;

    --closed-bg: #22262d;
    --closed-text: #555d6b;

    --badge-bg: #333842;
    --badge-text: #b0b8c4;

    --tag-bg: #1c2840;
    --tag-text: #7cacf8;

    --warning-bg: #332b00;
    --warning-border: #665600;
    --warning-text: #ffd43b;

    --error-bg: #3d1515;
    --error-border: #662020;
    --error-text: #ff8787;

    --success-bg: #0d3320;
    --success-text: #51cf66;

    --store-selector-bg: #2a2f38;
    --store-selector-text: #e4e6ea;
    --store-selector-border: #3d4350;
    --store-selector-icon: #7cacf8;
}

/* Global dark mode base */
body.dark-theme {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}