/*
 * CSS Variablen - Zentrale Definition
 * © 2025 Ti-age.de - Alle Rechte vorbehalten
 *
 * EINZIGE QUELLE für alle Farb-Variablen
 * Font-Sizes werden separat in Desktop/Mobile Templates definiert
 * Wird von allen Seiten und Templates importiert
 *
 * Erstellt: 2025-11-28
 */

/* ========================================
   FARB-DEFINITIONEN
   ======================================== */

:root {
    /* Primärfarben */
    --primary: #457B9D;           /* Hauptfarbe (Standard Blau) */
    --primary-light: #A8D5E2;     /* Helle Akzentfarbe */

    /* Hintergrundfarben */
    --bg-dark: #0f0f1a;           /* Haupt-Hintergrund (Dunkelblau/Schwarz) */
    --bg-card: #1a1a2e;           /* Card/Komponenten-Hintergrund */
    --bg-hover: #252542;          /* Hover-Zustand Hintergrund */
    --bg-primary: #0f0f1a;        /* Alias für bg-dark */
    --bg-secondary: #252542;      /* Alias für bg-hover */

    /* Textfarben */
    --text-primary: #f0f0f0;      /* Haupttext (fast weiß) */
    --text-secondary: #a0a0b0;    /* Sekundärtext */
    --text-muted: #9a9aaa;        /* Gedämpfter Text */

    /* Rahmen & Akzente */
    --border: rgba(255,255,255,0.1);  /* Subtile Rahmen */
    --success: #2ecc71;           /* Erfolg/Ich-Spalte (Grün) - GELEBT */
    --warning: #f39c12;           /* Warnung (Orange) - INTERESSIERT */
    --danger: #e74c3c;            /* Gefahr/Partner-Spalte (Rot) */

    /* ========================================
       TOGGLE BUTTON BASIS-STYLE
       Neon-Pink/Magenta mit Lila Akzenten
       ======================================== */
    --toggle-bg: #1a0a2e;                          /* Dunkler Lila Hintergrund */
    --toggle-bg-hover: #2d1b4e;                    /* Hellerer Lila beim Hover */
    --toggle-border: rgba(255, 0, 255, 0.3);       /* Subtiler Magenta Rand */
    --toggle-border-hover: rgba(255, 0, 255, 0.6); /* Stärkerer Magenta Rand beim Hover */
    --toggle-glow: #ff00ff;                        /* Neon Magenta Glow */
    --toggle-glow-secondary: #9b5de5;              /* Sekundärer Lila Glow */
    --toggle-active-bg: linear-gradient(135deg, #ff00ff, #9b5de5); /* Aktiver Gradient */
    --toggle-text: #e0d0ff;                        /* Heller Lila Text */
    --toggle-text-active: #ffffff;                 /* Weißer Text wenn aktiv */

    /* Font-Sizes: Definiert in template_desktop.css / template_mobile.css */
    /* Bar-Heights: Definiert in template_desktop.css / template_mobile.css */
}

/* ========================================
   ARCHETYP-THEME FARBEN
   Überschreiben --primary und --primary-light
   basierend auf dem gewählten Archetyp
   ======================================== */

body.theme-single {
    --primary: #E63946;           /* Rot für Single */
    --primary-light: #FFB4A2;
}

body.theme-duo {
    --primary: #E84393;           /* Pink für Duo */
    --primary-light: #FDA7DF;
}

body.theme-duo_flex {
    --primary: #FF6B6B;           /* Koralle für Duo-Flex */
    --primary-light: #FFA5A5;
}

body.theme-solopoly {
    --primary: #2A9D8F;           /* Türkis für Solopoly */
    --primary-light: #A8DADC;
}

body.theme-polyamor {
    --primary: #F4A261;           /* Orange für Polyamor */
    --primary-light: #FFE5B4;
}

body.theme-ra {
    --primary: #9B5DE5;           /* Violett für RA */
    --primary-light: #D4A5FF;
}

body.theme-lat {
    --primary: #06D6A0;           /* Mint-Grün für LAT */
    --primary-light: #B5EAD7;
}

body.theme-aromantisch {
    --primary: #118AB2;           /* Blau für Aromantisch */
    --primary-light: #83C5D8;
}

/* ========================================
   VERSION DISPLAY
   ======================================== */

.app-version-box {
    position: absolute;
    top: 8px;
    right: 12px;
    text-align: right;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0.7;
}

.app-version-box .version-line {
    font-weight: 500;
    color: var(--text-primary);
}

.app-version-box .merge-line {
    font-size: 10px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .app-version-box {
        position: static;
        text-align: center;
        margin-top: 8px;
        font-size: 10px;
    }
}