/* ===========================================================================
   avanatro.com — Design Tokens v1.0
   2026-05-16
   ---------------------------------------------------------------------------
   Single Source of Truth fuer das Haupt-Stylesheet /assets/styles.css.
   Konsumenten: index.php, impressum/, datenschutz/ und alle kuenftigen Seiten,
   die /assets/styles.css einbinden.

   NICHT konsumiert von:
   - /minigames/index.php (eigenes inline :root, separater Polish-Task)
   - tools.avanatro.com/assets/style.css (eigenes oklch-basiertes System)

   Konsolidiert aus Audit der Live-Site:
   - /assets/styles.css :root-Block (bestehende Variablen 1:1 uebernommen)
   - Inline-Hex-Werte aus styles.css (#c2d0d5, #1b9ca8, #02100d, #b7c7cd)
   - Inline-CSS aus impressum.php + datenschutz.php (rgba-Tints, Radien,
     Font-Sizes via clamp/rem)

   Strategie: bestehende Variablen behalten (additive Migration, keine
   Selektor-Aenderungen), neue Tokens fuer Spacing/Typo/Radien/Shadow/Motion
   ergaenzen. Bei Konflikten der Quellbereiche wird per Token-Name namespaced
   (z.B. --color-accent-minigames vs --color-accent — letzteres bleibt fuer
   das geteilte styles.css).

   prefers-reduced-motion respektiert: alle --duration-* werden auf 0ms gesetzt.
   =========================================================================== */

:root {
    color-scheme: dark;

    /* ===== Color — Surface ===== */
    --color-bg: #05070a;
    --color-bg-soft: #0a0f14;
    --color-bg-elevated: #101820;
    --color-panel: rgba(12, 18, 24, 0.82);
    --color-panel-strong: #101820;
    --color-input-bg: rgba(2, 6, 9, 0.72);

    /* ===== Color — Ink / Text ===== */
    --color-text: #f2f7f8;
    --color-text-soft: #c2d0d5;     /* aus styles.css .lead */
    --color-text-label: #b7c7cd;    /* aus styles.css .contact-form span */
    --color-text-muted: #8ea0a8;
    --color-text-faint: #5e6e76;

    /* ===== Color — Border / Rule ===== */
    --color-line: rgba(173, 214, 217, 0.18);
    --color-line-strong: rgba(119, 236, 218, 0.42);
    --color-line-subtle: rgba(255, 255, 255, 0.08);   /* aus impressum/datenschutz */

    /* ===== Color — Brand Accents ===== */
    --color-accent: #40df9f;        /* Emerald — Primary CTA */
    --color-accent-dark: #1b9ca8;   /* CTA-Gradient-Stop */
    --color-accent-deep: #02100d;   /* Text auf Emerald-Gradient */
    --color-accent-secondary: #54d4e8;   /* Cyan — Akzent */
    --color-amber: #ffb85a;
    --color-red: #ff6b6b;

    /* Legacy-Aliase — bestehende styles.css-Klassen referenzieren weiterhin
       diese Kurznamen. Migration auf --color-* erfolgt in Folge-Tasks. */
    --bg: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --panel: var(--color-panel);
    --panel-strong: var(--color-panel-strong);
    --line: var(--color-line);
    --line-strong: var(--color-line-strong);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --faint: var(--color-text-faint);
    --cyan: var(--color-accent-secondary);
    --emerald: var(--color-accent);
    --amber: var(--color-amber);
    --red: var(--color-red);

    /* ===== Color — Per-Bereich (namespaced fuer Folge-Polish) ===== */
    /* Minigames-Hub (siehe /minigames/index.php inline :root) */
    --color-minigames-bg: #000000;
    --color-minigames-surface: #111111;
    --color-minigames-card: #1C1C1E;
    --color-minigames-elevated: #242426;
    --color-minigames-glass: rgba(10, 10, 10, 0.75);
    --color-minigames-text: #FFFFFF;
    --color-minigames-text-secondary: #A1A1AA;
    --color-minigames-text-tertiary: #71717A;
    --color-minigames-border: rgba(255, 255, 255, 0.08);
    --color-minigames-border-hover: rgba(255, 255, 255, 0.18);
    --gradient-minigames-accent: linear-gradient(135deg, #3B82F6, #8B5CF6);

    /* Rechtsseiten Tints (Impressum / Datenschutz) */
    --color-legal-placeholder-bg: rgba(255, 200, 100, 0.12);
    --color-legal-placeholder-border: rgba(255, 200, 100, 0.5);
    --color-legal-placeholder-text: rgba(255, 220, 160, 0.95);
    --color-legal-notice-bg: rgba(255, 200, 100, 0.06);
    --color-legal-notice-border: rgba(255, 200, 100, 0.5);

    /* ===== Color — Status ===== */
    --color-success: var(--color-accent);
    --color-error: var(--color-red);
    --color-warning: var(--color-amber);

    /* ===== Spacing — 4er-Skala ===== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 96px;
    --space-14: 128px;

    /* ===== Spacing — semantische Bereiche ===== */
    --space-band-y: clamp(58px, 9vw, 110px);
    --space-band-x: clamp(18px, 4vw, 54px);
    --space-hero-top: 104px;
    --space-hero-bottom: 64px;

    /* ===== Typo — Font-Families ===== */
    --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ===== Typo — modulare Skala ===== */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;       /* body, aus bestehender styles.css */
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-h3: 18px;
    --font-size-h2: clamp(28px, 5vw, 54px);
    --font-size-h1: clamp(58px, 12vw, 132px);
    --font-size-h1-mobile: clamp(54px, 18vw, 82px);
    --font-size-lead: clamp(17px, 2vw, 22px);
    --font-size-legal-h1: clamp(2rem, 4vw, 2.75rem);
    --font-size-legal-h2: 1.35rem;
    --font-size-legal-h3: 1.05rem;

    /* ===== Typo — Weights ===== */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* ===== Typo — Line-Heights ===== */
    --line-height-tight: 0.9;
    --line-height-snug: 1.02;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ===== Typo — Letter-Spacing ===== */
    --letter-spacing-normal: 0;
    --letter-spacing-tight: -0.01em;

    /* ===== Radius ===== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;       /* dominant in styles.css */
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===== Shadow ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.32);
    --shadow-hero: 0 28px 90px rgba(0, 0, 0, 0.48);   /* aus styles.css --shadow */
    --shadow-focus-ring: 0 0 0 4px rgba(84, 212, 232, 0.09);
    --shadow-glow: 0 0 24px rgba(84, 212, 232, 0.12);
    --shadow: var(--shadow-hero);   /* Legacy-Alias */

    /* ===== Motion — Easings ===== */
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-default: ease;

    /* ===== Motion — Durations ===== */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 160ms;       /* dominant in styles.css transitions */
    --duration-medium: 250ms;
    --duration-slow: 400ms;
    --duration-deliberate: 700ms;

    /* ===== Layout — Container ===== */
    --container-max: 1220px;        /* aus styles.css .band */
    --container-hero: 980px;
    --container-text: 64rem;        /* aus impressum/datenschutz .legal */
    --container-copy: 760px;

    /* ===== Layout — Sticky / Fixed ===== */
    --z-base: 0;
    --z-header: 20;
    --z-modal: 50;
    --z-toast: 80;

    /* ===== Backdrop ===== */
    --backdrop-blur: blur(18px);
    --backdrop-header-bg: rgba(5, 7, 10, 0.78);

    /* ===== Component — Buttons (referenz fuer Folge-Tasks) ===== */
    --button-height: 46px;
    --button-padding-x: 16px;
    --button-radius: var(--radius-md);

    /* ===== Component — Inputs ===== */
    --input-padding-y: 12px;
    --input-padding-x: 13px;
    --input-radius: var(--radius-md);
    --input-min-height-textarea: 132px;
}

/* ===========================================================================
   Reduced-Motion respektieren — alle Durations auf 0ms.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-medium: 0ms;
        --duration-slow: 0ms;
        --duration-deliberate: 0ms;
    }
}