/* ============================================================
   LUMEXI – CSS VARIABLES (Design-System)
   Dark Premium AI-Learning. Hier ändern = überall ändern.
   ============================================================ */
:root {
    /* Farben – Deep Space + aurora accent */
    --color-background:     #06070b;
    --color-surface:        rgba(255, 255, 255, 0.03);
    --color-surface-hover:  rgba(255, 255, 255, 0.06);
    --color-surface-solid:  #0b0d14;
    --color-surface-raised: #10121b;
    --color-text:           #e8ebf4;
    --color-text-muted:     #8f95a6;
    --color-text-faint:     #5a5f70;
    --color-accent:         #8b9dff;   /* Lumexi Indigo */
    --color-accent-2:       #6ee7f4;   /* Cyan – sekundär, sparsam */
    --color-accent-soft:    rgba(139, 157, 255, 0.14);
    --color-accent-2-soft:  rgba(110, 231, 244, 0.12);
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-strong:  rgba(255, 255, 255, 0.15);

    /* Code-Syntax (Editor-Mockups, gedämpft) */
    --code-bg:              #0a0c13;
    --code-key:             #9aa7ff;
    --code-fn:              #7fd8e8;
    --code-string:          #a8d8a0;
    --code-num:             #e8c995;
    --code-comment:         #565b70;
    --code-punct:           #8f95a6;

    /* Typografie */
    --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-code:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

    --fs-hero:     clamp(2.6rem, 6.5vw, 4.6rem);
    --fs-h1:       clamp(2.1rem, 5vw, 3.6rem);
    --fs-h2:       clamp(1.35rem, 2.8vw, 1.9rem);
    --fs-body:     1.0625rem;
    --fs-small:    0.875rem;
    --fs-tiny:     0.75rem;

    --tracking-tight: -0.035em;
    --tracking-wide:  0.16em;

    /* Radien */
    --radius-small:  10px;
    --radius-medium: 16px;
    --radius-large:  24px;
    --radius-pill:   999px;

    /* Abstände */
    --spacing-section: clamp(6rem, 12vw, 10rem);
    --spacing-gap:     clamp(1rem, 2.5vw, 1.5rem);
    --container:       1180px;
    --container-pad:   clamp(1.25rem, 5vw, 2.5rem);

    /* Schatten & Glows */
    --shadow-small:  0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-large:  0 30px 80px -24px rgba(0, 0, 0, 0.7);
    --glow-accent:   0 0 60px -12px rgba(139, 157, 255, 0.45);
    --glow-card:     inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Motion */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
}