/*
 * Design-Tokens — Völkl IT-Solutions
 * Dark Theme. Akzentfarbe aus dem Logo (#2890d6).
 * Fließende Typo-Skala mit clamp() für Desktop ↔ Mobile ohne Breakpoint-Sprünge.
 */

:root {
    /* --- Farben (Dark) --- */
    --color-bg:           #0d1117; /* Anthrazit, Hauptfläche */
    --color-bg-elevated:  #161b22; /* leicht heller, für Karten/Felder */
    --color-bg-deep:      #0a0e14; /* tiefster Hintergrund (Hero, Trenner) */
    --color-bg-overlay:   rgba(13, 17, 23, 0.85);

    --color-text:         #e6edf3; /* warm white */
    --color-text-muted:   #8b949e; /* dezent, Subtexte */
    --color-text-subtle:  #6e7681; /* sehr leise */

    --color-border:       #21262d;
    --color-border-soft:  #161b22;
    --color-border-strong:#30363d;

    --color-accent:       #2890d6; /* aus Logo */
    --color-accent-soft:  #4aa9e6;
    --color-accent-deep:  #1a6fa8;
    --color-accent-glow:  rgba(40, 144, 214, 0.20);

    --color-success:      #3fb950;
    --color-warn:         #d29922;
    --color-danger:       #f85149;

    /* --- Schriften (lokal) --- */
    --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* --- Schriftgrößen (clamp = fluid) --- */
    --fs-xs:   0.8125rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.0625rem;
    --fs-lg:   1.25rem;
    --fs-xl:   clamp(1.5rem, 1.2rem + 1.0vw, 1.875rem);
    --fs-2xl:  clamp(2rem, 1.5rem + 2.0vw, 3rem);
    --fs-3xl:  clamp(2.5rem, 2.0rem + 3.0vw, 4.5rem);
    --fs-4xl:  clamp(3rem, 2.5rem + 4.0vw, 6rem);

    --lh-tight: 1.10;
    --lh-snug:  1.30;
    --lh-base:  1.60;
    --lh-loose: 1.80;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* --- Spacing (8-Punkt-Raster) --- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4rem;
    --sp-9:  6rem;
    --sp-10: 8rem;

    /* --- Radien --- */
    --r-sm: 0.25rem;
    --r-md: 0.5rem;
    --r-lg: 0.75rem;
    --r-xl: 1rem;
    --r-pill: 999px;

    /* --- Schatten (sparsam für Dark Theme) --- */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-glow:  0 0 24px var(--color-accent-glow);

    /* --- Layout --- */
    --container-max:    80rem;
    --container-narrow: 56rem;
    --container-prose:  42rem;

    /* --- Animation --- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:    150ms;
    --dur-base:    250ms;
    --dur-slow:    500ms;
    --dur-reveal:  800ms;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
        --dur-reveal: 0ms;
    }
}