/* ===========================================================================
   BAMBU STUDIO CONTROL CENTER - CSS-Variablen (Theming)
   ===========================================================================
   Version: v2.1.3
   Datei: html/css/variables.css
   Erstellt: 16.04.2026
   ===========================================================================

   MODUL-FUNKTION
   ---------------
   Definiert alle CSS Custom Properties (Variablen) fuer das Light/Dark-Mode-
   Theming. Das Umschalten erfolgt ueber das data-theme-Attribut auf dem
   html-Element. Alle anderen CSS-Module referenzieren ausschliesslich
   diese Variablen statt harter Farbwerte.

   Farbschema:
   - Light Mode: Heller Hintergrund (#f0f2f5), dunkle Schrift (#1a1a2e)
   - Dark Mode: Dunkler Hintergrund (#1a1a2e), helle Schrift (#e0e0e0)
   - Akzentfarbe: Bambu-Gruen (#00a884) in beiden Modi

   =========================================================================== */

/* ===========================================================================
   CSS-VARIABLEN: LIGHT MODE (Standard)
   =========================================================================== */
:root,
[data-theme="light"] {
    /* Hintergrundfarben */
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --bg-hover: #e8ecf0;

    /* Textfarben */
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-tertiary: #7a7a9a;
    --text-inverse: #ffffff;

    /* Akzentfarben */
    --accent-primary: #00a884;
    --accent-hover: #008f70;
    --accent-light: rgba(0, 168, 132, 0.1);

    /* Status-Farben */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-info: #3498db;

    /* Rahmen und Schatten */
    --border-color: #dfe3e8;
    --border-color-light: #eef0f3;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Modal-Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);

    /* Scrollbar */
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-track: #f0f0f0;

   /* Instrument-Dashboard */
   --instrument-shell-border: rgba(109, 124, 201, 0.18);
   --instrument-shell-glow-left: rgba(40, 188, 219, 0.12);
   --instrument-shell-glow-right: rgba(86, 108, 255, 0.08);
   --instrument-shell-bg-top: rgba(248, 251, 255, 0.98);
   --instrument-shell-bg-bottom: rgba(229, 236, 247, 0.98);
   --instrument-shell-shadow: 0 20px 50px rgba(108, 122, 156, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
   --instrument-shell-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 25%, transparent 75%, rgba(255, 255, 255, 0.16));
   --instrument-kicker: rgba(78, 97, 156, 0.78);
   --instrument-title: #1a2745;
   --instrument-text-primary: rgba(47, 65, 102, 0.88);
   --instrument-text-secondary: rgba(78, 97, 132, 0.74);
   --instrument-panel-bg: rgba(255, 255, 255, 0.62);
   --instrument-panel-border: rgba(122, 138, 176, 0.18);
   --instrument-panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.58);
   --instrument-file-bg: rgba(255, 255, 255, 0.72);
   --instrument-file-border: rgba(121, 138, 187, 0.18);
   --instrument-progress-track: rgba(94, 114, 182, 0.2);
   --instrument-progress-default: #1aa8d1;
   --instrument-progress-default-shadow: rgba(26, 168, 209, 0.28);
   --instrument-progress-heating: #f2a64b;
   --instrument-progress-heating-shadow: rgba(242, 166, 75, 0.3);
   --instrument-progress-printing: #1ebc8b;
   --instrument-progress-printing-shadow: rgba(30, 188, 139, 0.3);
   --instrument-progress-done: #6abf67;
   --instrument-progress-done-shadow: rgba(106, 191, 103, 0.32);
   --instrument-progress-text: #1d2948;
   --instrument-progress-subtext: rgba(78, 97, 132, 0.78);
   --instrument-thumbnail-bg: rgba(255, 255, 255, 0.58);
   --instrument-thumbnail-border: rgba(122, 138, 176, 0.16);
   --instrument-gauge-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(241, 246, 252, 0.56));
   --instrument-gauge-card-border: rgba(122, 138, 176, 0.16);
   --instrument-gauge-title: rgba(78, 97, 132, 0.8);
   --instrument-gauge-soll: rgba(67, 83, 119, 0.76);
   --instrument-gauge-track: rgba(75, 91, 150, 0.2);
   --instrument-gauge-default: #18abd2;
   --instrument-gauge-default-shadow: rgba(24, 171, 210, 0.28);
   --instrument-gauge-default-radial: rgba(24, 171, 210, 0.24);
   --instrument-gauge-warm: #f2a64b;
   --instrument-gauge-warm-shadow: rgba(242, 166, 75, 0.3);
   --instrument-gauge-warm-radial: rgba(242, 166, 75, 0.26);
   --instrument-gauge-hot: #f27777;
   --instrument-gauge-hot-shadow: rgba(242, 119, 119, 0.3);
   --instrument-gauge-hot-radial: rgba(242, 119, 119, 0.24);
   --instrument-needle-shadow: rgba(34, 46, 74, 0.24);
   --instrument-needle: #fdfefe;
   --instrument-hub: #fdfefe;
   --instrument-ticks: rgba(67, 83, 119, 0.74);
   --instrument-value: #1d2948;
   --instrument-subtitle: rgba(78, 97, 132, 0.76);
   --instrument-fan-track: rgba(92, 108, 176, 0.2);
   --instrument-fan-fill-start: #1aa8d1;
   --instrument-fan-fill-end: #1ebc8b;
   --instrument-fan-fill-shadow: rgba(26, 168, 209, 0.28);
   --instrument-slot-bg: rgba(255, 255, 255, 0.44);
   --instrument-slot-border: rgba(122, 138, 176, 0.14);
   --instrument-slot-active-border: rgba(24, 171, 210, 0.34);
   --instrument-slot-active-shadow: rgba(93, 116, 168, 0.18);
   --instrument-ring-border: rgba(132, 149, 214, 0.24);
   --instrument-ring-active: #18abd2;
   --instrument-ring-active-shadow: rgba(24, 171, 210, 0.1);
}

/* ===========================================================================
   CSS-VARIABLEN: DARK MODE
   =========================================================================== */
[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #1c2541;
    --bg-hover: #253256;

    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b8;
    --text-tertiary: #707090;
    --text-inverse: #1a1a2e;

    --accent-primary: #00c49a;
    --accent-hover: #00dba8;
    --accent-light: rgba(0, 196, 154, 0.12);

    --color-success: #2ecc71;
    --color-warning: #f1c40f;
    --color-danger: #e74c3c;
    --color-danger-hover: #ff5252;
    --color-info: #5dade2;

    --border-color: #2a3a5c;
    --border-color-light: #233050;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

    --overlay-bg: rgba(0, 0, 0, 0.7);

    --scrollbar-thumb: #3a4a6c;
    --scrollbar-track: #1a1a2e;

   --instrument-shell-border: rgba(109, 124, 201, 0.18);
   --instrument-shell-glow-left: rgba(40, 188, 219, 0.18);
   --instrument-shell-glow-right: rgba(86, 108, 255, 0.12);
   --instrument-shell-bg-top: rgba(16, 21, 44, 0.96);
   --instrument-shell-bg-bottom: rgba(11, 16, 34, 0.98);
   --instrument-shell-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   --instrument-shell-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03));
   --instrument-kicker: rgba(176, 188, 255, 0.72);
   --instrument-title: #f2f6ff;
   --instrument-text-primary: rgba(222, 229, 255, 0.88);
   --instrument-text-secondary: rgba(186, 196, 229, 0.74);
   --instrument-panel-bg: rgba(255, 255, 255, 0.045);
   --instrument-panel-border: rgba(255, 255, 255, 0.06);
   --instrument-panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
   --instrument-file-bg: rgba(255, 255, 255, 0.04);
   --instrument-file-border: rgba(255, 255, 255, 0.06);
   --instrument-progress-track: rgba(94, 114, 182, 0.22);
   --instrument-progress-default: #20d3ef;
   --instrument-progress-default-shadow: rgba(32, 211, 239, 0.25);
   --instrument-progress-heating: #ffaf51;
   --instrument-progress-heating-shadow: rgba(255, 175, 81, 0.3);
   --instrument-progress-printing: #23d6a2;
   --instrument-progress-printing-shadow: rgba(35, 214, 162, 0.3);
   --instrument-progress-done: #9ef27e;
   --instrument-progress-done-shadow: rgba(158, 242, 126, 0.35);
   --instrument-progress-text: #f6f8ff;
   --instrument-progress-subtext: rgba(196, 208, 245, 0.78);
   --instrument-thumbnail-bg: rgba(255, 255, 255, 0.05);
   --instrument-thumbnail-border: rgba(255, 255, 255, 0.06);
   --instrument-gauge-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
   --instrument-gauge-card-border: rgba(255, 255, 255, 0.06);
   --instrument-gauge-title: rgba(184, 196, 233, 0.74);
   --instrument-gauge-soll: rgba(222, 229, 248, 0.76);
   --instrument-gauge-track: rgba(75, 91, 150, 0.28);
   --instrument-gauge-default: #27d7f0;
   --instrument-gauge-default-shadow: rgba(39, 215, 240, 0.26);
   --instrument-gauge-default-radial: rgba(39, 215, 240, 0.18);
   --instrument-gauge-warm: #ffaf51;
   --instrument-gauge-warm-shadow: rgba(255, 175, 81, 0.3);
   --instrument-gauge-warm-radial: rgba(255, 175, 81, 0.2);
   --instrument-gauge-hot: #ff6f7d;
   --instrument-gauge-hot-shadow: rgba(255, 111, 125, 0.32);
   --instrument-gauge-hot-radial: rgba(255, 111, 125, 0.18);
   --instrument-needle-shadow: rgba(0, 0, 0, 0.35);
   --instrument-needle: #f5f8ff;
   --instrument-hub: #eef4ff;
   --instrument-ticks: rgba(226, 233, 255, 0.7);
   --instrument-value: #f9fbff;
   --instrument-subtitle: rgba(186, 196, 229, 0.74);
   --instrument-fan-track: rgba(92, 108, 176, 0.28);
   --instrument-fan-fill-start: #1ad0ee;
   --instrument-fan-fill-end: #22d6a2;
   --instrument-fan-fill-shadow: rgba(26, 208, 238, 0.34);
   --instrument-slot-bg: rgba(255, 255, 255, 0.03);
   --instrument-slot-border: rgba(255, 255, 255, 0.04);
   --instrument-slot-active-border: rgba(32, 211, 239, 0.4);
   --instrument-slot-active-shadow: rgba(9, 19, 38, 0.35);
   --instrument-ring-border: rgba(132, 149, 214, 0.22);
   --instrument-ring-active: #21d5ee;
   --instrument-ring-active-shadow: rgba(33, 213, 238, 0.08);
}