/* ==========================================================================
   ZENTRALE FARBPALETTE & VARIABLEN (Single Source of Truth)
   ========================================================================== */

/* 
   CORE VARIABLES (THEME INDEPENDENT)
   Diese Variablen gelten global für alle Themes (Layout, Layering, etc.)
*/
:root {
    /* --- Z-Index Layering (Normalization) ---
       Scale: 1–1000 (compact, with room between steps)
       RULE: --z-dropdown is the ABSOLUTE HIGHEST value.
       User-Menu and Language-Dropdown must ALWAYS be on top.
       No other element may use a z-index >= --z-dropdown.
    */
    --z-base: 1;
    --z-ui-overlay: 10;
    --z-sticky: 50;
    --z-nav: 100;
    --z-window: 200;
    --z-modal: 400;
    --z-confirm: 500;
    --z-toast: 700;
    --z-max: 900;
    --z-dropdown: 1000;
    /* ← ABSOLUTE CEILING — Top-Bar Dropdowns */

    /* --- Surface System (Layered Architecture) --- */
    /* 
       Logic:
       --surface-base: The deepest background (Body)
       --surface-mix-target: The color used to creating contrast layers (White in dark mode, Black in light mode)
       
       Levels:
       --surface-1: Standard Container (Card, Panel) -> Base mixed with 5% target
       --surface-2: Elevated Element (Input, Item) -> Base mixed with 10% target
       --surface-3: High Emphasis (Hover, Active) -> Base mixed with 15% target
    */

    /* Default Mix Configuration (Dark Mode Default) */
    --surface-mix-target: white;
    --glass-opacity: 0.85;
    /* Global opacity factor for glass surfaces */


    /* --- Derived Surfaces (Formulas) --- */
    /* Level 1 (Panels) */
    --surface-1: color-mix(in srgb, var(--surface-base), var(--surface-mix-target) 5%);
    /* Level 2 (Inputs, Buttons, Secondary Elements) */
    --surface-2: color-mix(in srgb, var(--surface-base), var(--surface-mix-target) 10%);
    /* Level 3 (Content Area Backgrounds) */
    --surface-3: color-mix(in srgb, var(--surface-base), var(--surface-mix-target) 13%);
    /* Level 4 (Hover / Highlight) */
    --surface-hover: color-mix(in srgb, var(--surface-base), var(--surface-mix-target) 18%);

    /* --- Glass Variants (Translucent) --- */
    /* 
       Glass Panel: Uses Surface 1 color but with reduced opacity.
       Calculation: Mix with transparent based on (100% - opacity).
       Note: calc() inside color-mix for transparency percentages is widely supported in modern browsers
       or we use a fixed percentage for simplicity if calc fails. 
       Let's use a cleaner manual mix for now to ensure stability or direct alpha mixing if possible.
       For now: Standard 85% opacity version of Surface 1.
    */
    --surface-1-glass: color-mix(in srgb, var(--surface-1), transparent 15%);

    /* Header is often slightly more transparent */
    --surface-header: color-mix(in srgb, var(--surface-base), transparent 20%);

    /* Backdrop/Overlay */
    --surface-backdrop: rgba(0, 0, 0, 0.7);

    /* Legacy Mappings (Temporary until CSS is updated) */
    --bg-app: var(--surface-base);
    --bg-panel: var(--surface-1);
    --bg-element: var(--surface-2);
    --bg-hover: var(--surface-header);
    --bg-panel-header: var(--surface-header);
    --bg-panel-trans: var(--surface-1-glass);
    --bg-overlay: var(--surface-backdrop);

    /* --- Functional Colors --- */
    --color-edit-mode: #1de99b;
    --color-template-mode: #8e24aa;
    /* Purple for Templates */
    --color-package-mode: #9C27B0;
    /* Purple for Packages */

    /* --- Functional Colors (Status) --- */
    --status-success: #388E3C;
    /* Grün (Okay / Speichern) */
    --status-success-hover: #6fdb2e;
    /* Kräftigeres Grün für Hover (hebt hervor, statt auszuwaschen) */

    --status-warning: #FFB74D;
    /* Orange (Warnung / Temporär) */

    --status-error: #e34a21;
    /* Rot (Fehler / Löschen) */
    --status-error-hover: #ff5a33;
    /* Helleres Rot für Hover (hebt hervor) */

    --status-info: #1976D2;
    /* Blau (Information / Hinweis) */

    /* --- Badge Colors (Status Badges) --- */
    --badge-draft: #FFB74D;
    /* Gelb/Orange - Entwurf */
    --badge-offer: #42A5F5;
    /* Hellblau - Angebot */
    --badge-ordered: #66BB6A;
    /* Grün - Beauftragt */
    --badge-completed: #5C6BC0;
    /* Blau/Indigo - Abgeschlossen */
    --badge-cancelled: #EF5350;
    /* Rot - Abgesagt */
    --badge-lost: #BDBDBD;
    /* Grau - Verloren */
    --badge-active: #66BB6A;
    /* Grün - Aktiv (Expo Exhibitor) */
    --badge-inactive: #EF5350;
    /* Rot - Inaktiv (Expo Exhibitor) */
    --badge-invited: #AB47BC;
    /* Lila - Eingeladen (Login) */

    /* --- FONTS --- */
    --font-heading: 'Open Sans', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* --- Default Accent (Fallback) --- */
    --color-accent: #74AA50;

    /* 
       Dynamic Accent Variations 
       Automatische Berechnung basierend auf --color-accent 
    */
    --color-accent-hover: color-mix(in srgb, var(--color-accent), black 20%);
    --color-accent-glow: color-mix(in srgb, var(--color-accent), transparent 50%);
    --color-accent-hint-bg: color-mix(in srgb, var(--color-accent), transparent 85%);
    --color-accent-hint-border: color-mix(in srgb, var(--color-accent), transparent 60%);

    /* Text Highlight default */
    --text-highlight: var(--color-accent);

    /* --- Border System (Color Mix) --- */
    --border-mix-target: white;
    /* Default mixer for Dark Mode */
    --border-color: #404040;


    /* Derived Border Colors */
    --border-color-light: color-mix(in srgb, var(--border-color), var(--border-mix-target) 20%);
    --border-color-more-light: color-mix(in srgb, var(--border-color), var(--border-mix-target) 50%);
    --border-color-more-more-light: color-mix(in srgb, var(--border-color), var(--border-mix-target) 75%);

    /* --- Text Colors (Color Mix) --- */
    /* Basis ist immer --text-main */
    --text-mix-target: transparent;
    /* Verblasst zu transparent (Standard) */

    --text-muted: color-mix(in srgb, var(--text-main), var(--text-mix-target) 40%);
    --text-secondary: color-mix(in srgb, var(--text-main), var(--text-mix-target) 25%);
}

/* ==========================================================================
   STANDARD (Fallback wenn kein Theme gesetzt)
   ========================================================================== */

:root {
    --surface-base: #121212;
    --surface-mix-target: white;
    --surface-backdrop: rgba(0, 0, 0, 0.7);
    --border-mix-target: white;
    --border-color: #404040;
    --text-main: #d0d0d0;
    --input-bg: #1a1a1a;
}

/* ==========================================================================
   DUNKLE THEMES
   ========================================================================== */

[data-theme="dark"] {
    --surface-base: #121212;
    --surface-mix-target: white;
    --surface-backdrop: rgba(0, 0, 0, 0.7);
    --border-mix-target: white;
    --border-color: #404040;
    --text-main: #d0d0d0;
    --input-bg: #1a1a1a;
}

[data-theme="midnight"] {
    --surface-base: #030308;
    --surface-mix-target: white;
    --surface-backdrop: rgba(0, 0, 0, 0.85);
    --border-color: #121a2b;
    --border-mix-target: white;
    --text-main: #eef2ff;
    --input-bg: #05080f;
}

[data-theme="ember"] {
    --surface-base: #040200;
    --surface-mix-target: white;
    --surface-backdrop: rgba(0, 0, 0, 0.85);
    --border-color: #291900;
    --border-mix-target: white;
    --text-main: #fffaf0;
    --input-bg: #0f0900;
}

[data-theme="petrol"] {
    --surface-base: #02100f;
    --surface-mix-target: white;
    --surface-backdrop: rgba(0, 0, 0, 0.85);
    --border-color: #14443f;
    --border-mix-target: white;
    --text-main: #e6f5f1;
    --input-bg: #010807;
}

/* ==========================================================================
   HELLE THEMES
   ========================================================================== */

[data-theme="light"] {
    --surface-base: #ffffff;
    --surface-mix-target: rgb(0, 0, 0);
    --surface-backdrop: rgba(0, 0, 0, 0.4);
    --border-color: #dee2e6;
    --border-mix-target: black;
    --text-main: #212529;
    --text-mix-target: transparent;
    --input-bg: #f2f2f2;
}

[data-theme="warmlight"] {
    --surface-base: #f9f8f6;
    --surface-mix-target: black;
    --surface-backdrop: rgba(0, 0, 0, 0.3);
    --border-color: #d8d6d1;
    --border-mix-target: black;
    --text-main: #212529;
    --text-mix-target: transparent;
    --input-bg: #eee9e4;
}

/* "Graphit" — Richtung Petrol getönt (User 2026-07-08), aber GANZ HELL und nur ein
   ANGEDEUTETER Stich: Farbton auf Petrol-Teal (176°), Sättigung sehr dezent (8 %,
   vorher 16 % = zu viel), Helligkeit bleibt bei 95 %. */
[data-theme="slate"] {
    --surface-base: hsl(176, 8%, 95%);
    --surface-mix-target: black;
    --surface-backdrop: hsla(176, 8%, 18%, 0.3);
    --border-color: hsl(176, 8%, 73%);
    --border-mix-target: black;
    --text-main: hsl(176, 8%, 11%);
    --text-mix-target: transparent;
    --input-bg: hsl(176, 8%, 95%);
}

/* ==========================================================================
   FARB-THEMES
   ========================================================================== */

[data-theme="nordic"] {
    --surface-base: #797d8c;
    --surface-mix-target: black;
    --surface-backdrop: rgba(30, 35, 50, 0.85);
    --border-color: #2f3445;
    --border-mix-target: white;
    --text-main: #ffffff;
    --input-bg: #4b526b;
}

[data-theme="olive"] {
    --surface-base: #6a6e6b;
    --surface-mix-target: black;
    --surface-backdrop: rgba(25, 30, 25, 0.85);
    --border-color: #3b453d;
    --border-mix-target: white;
    --text-main: #f0f5f2;
    --input-bg: #4c554e;
}

[data-theme="taupe"] {
    --surface-base: #a4a09f;
    --surface-mix-target: rgb(255, 255, 255);
    --surface-backdrop: rgba(0, 0, 0, 0.4);
    --border-color: #7a6f6a;
    --border-mix-target: white;
    --text-main: #464646;
    --input-bg: #ffffff;
}

/* Standinfo-Grün (Überschrift + Preis): das helle Lime #96ff50 hat auf HELLEN
   Themes zu wenig Kontrast → dort lesbar abdunkeln. Dunkle sowie mittelgraue
   Themes (taupe/nordic/olive) behalten das helle Grün (dort besserer Kontrast).
   (User 2026-07-08) */
:root { --info-green: #96ff50; }
[data-theme="light"],
[data-theme="warmlight"],
[data-theme="slate"] {
    --info-green: #2e7d32;
}




/* ==========================================================================
   AKZENTFARBEN-DEFINITIONEN
   ========================================================================== */

/* BLUE (Default) */
[data-accent="blue"] {
    --color-accent: #007acc;
}

/* RED */
[data-accent="red"] {
    --color-accent: #e53935;
}

/* GREEN */
[data-accent="green"] {
    --color-accent: #74AA50;
}

/* ORANGE */
[data-accent="orange"] {
    --color-accent: #fb8c00;
}

/* PURPLE */
[data-accent="purple"] {
    --color-accent: #8e24aa;
}

/* TEAL */
[data-accent="teal"] {
    --color-accent: #00897b;
}

/* JADE */
[data-accent="jade"] {
    --color-accent: #3b8f78;
}

/* MINT */
[data-accent="mint"] {
    --color-accent: #00c48d;
}

/* LIME */
[data-accent="lime"] {
    --color-accent: #96ff50;
}

/* VIOLET */
[data-accent="violet"] {
    --color-accent: #754fde;
}

/* YELLOW */
[data-accent="yellow"] {
    --color-accent: #fbc02d;
}

/* PINK */
[data-accent="pink"] {
    --color-accent: #e91e63;
}

/* MONOCHROME */
[data-accent="monochrome"] {
    --color-accent: #9e9e9e;
}