/* ============================================================
   NICKINO TEMPLATE – COLOR SYSTEM
   Light & Dark Mode
   Alle Farben variablisiert
   ============================================================ */

/* ============================================================
   GLOBAL DEFAULTS (werden von Light/Dark überschrieben)
   ============================================================ */
:root {
    /* Grundfarben */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Neon Style */
    --neon-green: #39ff14;
    --neon-green-soft: #2ecc10;
    --neon-green-dark: #1fa30c;

    /* Grautöne */
    --gray-10: #f5f5f5;
    --gray-20: #e5e5e5;
    --gray-30: #cccccc;
    --gray-40: #999999;
    --gray-50: #666666;
    --gray-60: #333333;

    /* Transparenzen */
    --black-50: rgba(0,0,0,0.5);
    --black-70: rgba(0,0,0,0.7);
    --white-50: rgba(255,255,255,0.5);

    /* Textfarben */
    --text-color: var(--color-black);
    --text-color-soft: var(--gray-60);

    /* Links */
    --link-color: var(--neon-green);
    --link-hover: var(--neon-green-soft);

    /* Glow */
    --glow-strong: 0 0 12px var(--neon-green);
    --glow-soft: 0 0 6px var(--neon-green-soft);

    /* Navigation */
    --nav-bg: var(--color-white);
    --nav-text: var(--color-black);
    --nav-hover: var(--neon-green);
    --nav-border: var(--gray-30);

    /* Header */
    --header-bg: var(--color-black);
    --header-text: var(--neon-green);

    /* Topbar */
    --topbar-bg: var(--gray-10);
    --topbar-text: var(--gray-60);

    /* Footer */
    --footer-bg: var(--gray-20);
    --footer-text: var(--gray-60);

    /* Sticky Mini Nav */
    --mini-nav-bg: var(--color-black);
    --mini-nav-text: var(--neon-green);

    /* Mobile Sticky Bottom */
    --mobile-sticky-bg: var(--color-black);
    --mobile-sticky-text: var(--neon-green);
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
:root[data-bs-theme="light"] {

    --text-color: #111;
    --text-color-soft: #333;

    --bg-body: #f5f5f5;

    /* Topbar */
    --topbar-bg: #f2f2f2;
    --topbar-text: #575757;

    /* Header */
    --header-bg: #000000;
    --header-text: var(--neon-green);

    /* Navigation */
    --nav-bg: #ffffff;
    --nav-text: #000000;
    --nav-hover: var(--neon-green);
    --nav-border: #cccccc;

    /* Footer */
    --footer-bg: #f5f5f5;
    --footer-text: #111;

    /* Sticky Mini Nav */
    --mini-nav-bg: #000000;
    --mini-nav-text: var(--neon-green);

    /* Mobile Sticky */
    --mobile-sticky-bg: #000000;
    --mobile-sticky-text: var(--neon-green);
}

/* ============================================================
   DARK MODE
   ============================================================ */
:root[data-bs-theme="dark"] {

    --text-color: #eeeeee;
    --text-color-soft: #bbbbbb;

    --bg-body: #000000;

    /* Topbar */
    --topbar-bg: #000000;
    --topbar-text: var(--neon-green);

    /* Header */
    --header-bg: #000000;
    --header-text: var(--neon-green);

    /* Navigation */
    --nav-bg: #000000;
    --nav-text: #ffffff;
    --nav-hover: var(--neon-green);
    --nav-border: #222222;

    /* Footer */
    --footer-bg: #0f0f0f;
    --footer-text: #eeeeee;

    /* Sticky Mini Nav */
    --mini-nav-bg: #000000;
    --mini-nav-text: var(--neon-green);

    /* Mobile Sticky */
    --mobile-sticky-bg: #000000;
    --mobile-sticky-text: var(--neon-green);
}