/**
 * BenchBalancer Theme Variables
 * Global CSS variables for dark (default) and light themes
 */

/* ============================================
   DARK THEME (DEFAULT)
   ============================================ */
:root {
    /* Background Colors */
    --bg-900: #04070d;
    --bg-880: #08101a;
    --bg-850: #0e1625;
    --bg-800: rgba(18, 28, 45, 0.95);
    --bg-700: rgba(24, 34, 53, 0.85);
    --bg-card: rgba(23, 34, 58, 0.95);
    --bg-card-soft: rgba(28, 42, 66, 0.75);
    --bg-highlight: rgba(0, 255, 224, 0.08);
    --bg-overlay: rgba(4, 7, 13, 0.95);

    /* Accent Colors */
    --accent-cyan: #00ffe0;
    --accent-cyan-strong: #00cdb8;
    --accent-cyan-dim: rgba(0, 255, 224, 0.3);
    --accent-blue: #73a7ff;
    --accent-purple: #7c5cff;
    --accent-warm: #ffb23f;
    --accent-success: #4be9a6;
    --accent-danger: #ff5f6d;
    --accent-danger-dim: rgba(255, 95, 109, 0.2);

    /* Text Colors */
    --text-primary: #f5fbff;
    --text-secondary: #9fb7d6;
    --text-muted: #6f829e;
    --text-inverse: #000000;

    /* Border Colors */
    --border-strong: rgba(0, 255, 224, 0.5);
    --border-soft: rgba(0, 255, 224, 0.25);
    --border-faint: rgba(255, 255, 255, 0.08);
    --border-danger: rgba(255, 95, 109, 0.5);

    /* Modal Specific */
    --modal-bg: linear-gradient(145deg, #1a2332 0%, #0f1520 100%);
    --modal-border: rgba(0, 255, 224, 0.4);
    --modal-shadow: rgba(0, 255, 224, 0.15);

    /* Input Fields */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(0, 255, 224, 0.5);
    --input-text: #ffffff;
    --input-placeholder: #6f829e;

    /* Buttons */
    --btn-primary-bg: linear-gradient(90deg, #00ffe0 0%, #00cdb8 100%);
    --btn-primary-text: #000000;
    --btn-secondary-bg: rgba(0, 0, 0, 0.3);
    --btn-secondary-border: rgba(255, 255, 255, 0.3);
    --btn-secondary-text: #ffffff;
    --btn-danger-bg: linear-gradient(90deg, #ff5f6d 0%, #ff3d47 100%);
    --btn-danger-text: #ffffff;

    /* Toggle Buttons */
    --toggle-active-bg: #00ffe0;
    --toggle-active-text: #000000;
    --toggle-inactive-bg: rgba(0, 0, 0, 0.3);
    --toggle-inactive-border: rgba(255, 255, 255, 0.3);
    --toggle-inactive-text: #ffffff;

    /* Dropdowns */
    --dropdown-bg: #00ffe0;
    --dropdown-text: #000000;
    --dropdown-arrow: #000000;

    /* Status Boxes */
    --status-box-bg: rgba(0, 255, 224, 0.1);
    --status-box-border: rgba(0, 255, 224, 0.3);
    --status-header-text: #00ffe0;
    --status-value-text: #ffffff;

    /* Pro Banner */
    --pro-banner-bg: linear-gradient(90deg, #00ffe0 0%, #00cdb8 100%);
    --pro-banner-text: #000000;

    /* Scrollbar */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(0, 255, 224, 0.3);
    --scrollbar-thumb-hover: rgba(0, 255, 224, 0.5);
}

/* ============================================
   LIGHT THEME
   ============================================ */
:root[data-theme="light"] {
    /* Background Colors */
    --bg-900: #f0f4f8;
    --bg-880: #ffffff;
    --bg-850: #e8eef4;
    --bg-800: rgba(232, 238, 244, 0.98);
    --bg-700: rgba(226, 232, 240, 0.95);
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-card-soft: rgba(248, 250, 252, 0.95);
    --bg-highlight: rgba(0, 150, 136, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.98);

    /* Accent Colors */
    --accent-cyan: #00897b;
    --accent-cyan-strong: #00695c;
    --accent-cyan-dim: rgba(0, 137, 123, 0.2);
    --accent-blue: #1976d2;
    --accent-purple: #5c4cdb;
    --accent-warm: #f57c00;
    --accent-success: #2e7d32;
    --accent-danger: #d32f2f;
    --accent-danger-dim: rgba(211, 47, 47, 0.15);

    /* Text Colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-strong: rgba(0, 137, 123, 0.6);
    --border-soft: rgba(0, 137, 123, 0.25);
    --border-faint: rgba(0, 0, 0, 0.08);
    --border-danger: rgba(211, 47, 47, 0.5);

    /* Modal Specific */
    --modal-bg: linear-gradient(145deg, #ffffff 0%, #f7fafc 100%);
    --modal-border: rgba(0, 137, 123, 0.4);
    --modal-shadow: rgba(0, 0, 0, 0.15);

    /* Input Fields */
    --input-bg: #f7fafc;
    --input-border: rgba(0, 137, 123, 0.5);
    --input-text: #1a202c;
    --input-placeholder: #a0aec0;

    /* Buttons */
    --btn-primary-bg: linear-gradient(90deg, #00897b 0%, #00695c 100%);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #e2e8f0;
    --btn-secondary-border: #cbd5e0;
    --btn-secondary-text: #4a5568;
    --btn-danger-bg: linear-gradient(90deg, #d32f2f 0%, #c62828 100%);
    --btn-danger-text: #ffffff;

    /* Toggle Buttons */
    --toggle-active-bg: #00897b;
    --toggle-active-text: #ffffff;
    --toggle-inactive-bg: #e2e8f0;
    --toggle-inactive-border: #cbd5e0;
    --toggle-inactive-text: #4a5568;

    /* Dropdowns */
    --dropdown-bg: #00897b;
    --dropdown-text: #ffffff;
    --dropdown-arrow: #ffffff;

    /* Status Boxes */
    --status-box-bg: rgba(0, 137, 123, 0.1);
    --status-box-border: rgba(0, 137, 123, 0.3);
    --status-header-text: #00695c;
    --status-value-text: #1a202c;

    /* Pro Banner */
    --pro-banner-bg: linear-gradient(90deg, #00897b 0%, #00695c 100%);
    --pro-banner-text: #ffffff;

    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 137, 123, 0.3);
    --scrollbar-thumb-hover: rgba(0, 137, 123, 0.5);
}

/* ============================================
   GLOBAL UTILITY CLASSES
   ============================================ */

/* Theme transition for smooth switching */
body,
.modal-overlay,
.settings-modal-content,
.help-modal-content,
input,
button,
select {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* RTL Support for Arabic/Hebrew */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .settings-two-column {
    flex-direction: row-reverse;
}

[dir="rtl"] .settings-dropdown-arrow {
    left: 12px;
    right: auto;
}

[dir="rtl"] .settings-btn-row {
    flex-direction: row-reverse;
}