/* ============================================================
   xNetwork — variables.css
   Design Tokens. Alle Werte die sich wiederholen kommen
   ausschliesslich von hier. Niemals hartcodierte Werte
   im restlichen CSS verwenden.
   ============================================================ */

:root {

    /* BEGIN ACCENT */
    --accent:               #e8637a;
    --accent-soft:          rgba(232, 99, 122, 0.18);
    --accent-glow:          rgba(232, 99, 122, 0.35);
    --accent-subtle:        rgba(232, 99, 122, 0.07);
    /* END ACCENT */

    /* BEGIN TEXT */
    --text-primary:         rgba(255, 255, 255, 0.92);
    --text-secondary:       rgba(255, 255, 255, 0.65);
    --text-muted:           rgba(255, 255, 255, 0.45);
    --text-subtle:          rgba(255, 255, 255, 0.28);
    /* END TEXT */

    /* BEGIN STATUS */
    --color-success:        #4caf82;
    --color-success-soft:   rgba(76, 175, 130, 0.18);
    --color-warning:        #e8a23a;
    --color-warning-soft:   rgba(232, 162, 58, 0.18);
    --color-danger:         #e85555;
    --color-danger-soft:    rgba(232, 85, 85, 0.18);
    --color-info:           #5b9bd5;
    --color-info-soft:      rgba(91, 155, 213, 0.18);
    /* END STATUS */

    /* BEGIN SURFACES */
    --surface:              rgba(12, 9, 22, 0.84);
    --surface-modal:        rgba(20, 20, 20, 0.88);
    --glass:                rgba(255, 255, 255, 0.06);
    --glass-hover:          rgba(255, 255, 255, 0.10);
    /* END SURFACES */

    /* BEGIN BORDERS */
    --border:               rgba(255, 255, 255, 0.10);
    --border-hover:         rgba(255, 255, 255, 0.20);
    --border-focus:         rgba(232, 99, 122, 0.60);
    /* END BORDERS */

    /* BEGIN RADIUS */
    --radius-sm:            6px;
    --radius:               10px;
    --radius-md:            14px;
    --radius-lg:            20px;
    --radius-xl:            28px;
    --radius-full:          9999px;
    /* END RADIUS */

    /* BEGIN SHADOWS */
    --shadow-sm:            0 2px 8px   rgba(0, 0, 0, 0.30);
    --shadow:               0 8px 32px  rgba(0, 0, 0, 0.45);
    --shadow-lg:            0 16px 48px rgba(0, 0, 0, 0.55);
    --shadow-xl:            0 24px 64px rgba(0, 0, 0, 0.70);
    --shadow-accent:        0 4px 24px  rgba(232, 99, 122, 0.28);
    /* END SHADOWS */

    /* BEGIN FONTS */
    --font-sans:            'Outfit', system-ui, sans-serif;
    --font-mono:            'JetBrains Mono', 'Cascadia Code', monospace;
    /* END FONTS */

    /* BEGIN FONT-SCALE */
    --text-2xs:             0.62rem;    /* Uppercase-Labels, Tags          */
    --text-xs:              0.72rem;    /* Badges, Chips, Footer           */
    --text-sm:              0.82rem;    /* Sekundaertext, Card-Body        */
    --text-ui:              0.875rem;   /* Buttons, UI-Elemente            */
    --text-base:            1rem;       /* Fliessstext, Absaetze           */
    --text-md:              1.05rem;    /* Unterueberschriften             */
    --text-lg:              1.15rem;    /* Sektions-Titel                  */
    --text-xl:              1.6rem;     /* Seitentitel                     */
    --text-2xl:             2rem;       /* Hero-Titel (Header)             */
    /* END FONT-SCALE */

    /* BEGIN SPACING */
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              20px;
    --space-6:              24px;
    --space-8:              32px;
    --space-10:             40px;
    --space-12:             48px;
    --space-16:             64px;
    /* END SPACING */

    /* BEGIN TRANSITIONS */
    --transition-fast:      0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition:           0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      0.40s cubic-bezier(0.4, 0, 0.2, 1);
    /* END TRANSITIONS */

    /* BEGIN Z-INDEX */
    --z-background:         0;
    --z-overlay:            1;
    --z-content:            2;
    --z-sticky:             10;
    --z-navbar:             100;
    --z-dropdown:           200;
    --z-modal:              300;
    --z-toast:              400;
    --z-tooltip:            500;
    /* END Z-INDEX */

}