/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {

    /* Layout */
    --container-xs: 720px;
    --container-sm: 960px;
    --container-md: 1200px;
    --container-lg: 1440px;
    --container-content: 1440px;
    --container-wide: 1440px;
    --container-hero: 1520px;

    --container-padding: clamp(1rem, 3vw, 2rem);
    --eyebrow-padding: .45rem .95rem;

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-xl: 48px;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --section-gap: clamp(2rem, 4vw, 3rem);
    --hero-space-top: 3rem;
    --hero-space-bottom: 2rem;

    /* Typography */
    --font-hero: clamp(2rem, 3vw, 3rem);
    --font-h1: clamp(1.9rem, 2.5vw, 2.7rem);
    --font-h2: clamp(1.6rem, 2vw, 2.2rem);
    --font-h3: clamp(1.25rem, 1.5vw, 1.6rem);
    --font-body: clamp(1rem, 1.1vw, 1.125rem);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.12);
    --shadow-navigation-menu:
        0 28px 56px -16px rgba(0, 0, 0, .20),
        0 12px 24px -12px rgba(0, 0, 0, .12);
    --shadow-glass:
        0 8px 30px rgba(0, 0, 0, .04),
        0 18px 60px rgba(255, 255, 255, .08);
    --shadow-glass-hover:
        0 12px 36px rgba(0, 0, 0, .10),
        0 18px 70px rgba(255, 255, 255, .12);
    --shadow-card-hover:
        0 18px 42px rgba(0, 0, 0, .12);
    --shadow-button:
        0 8px 20px rgba(242, 154, 58, .22);
    --shadow-button-hover:
        0 14px 34px rgba(242, 154, 58, .35);
    --shadow-button-secondary:
        0 8px 24px rgba(255, 255, 255, .08),
        0 0 24px rgba(255, 255, 255, .05);
    --shadow-button-secondary-hover:
        0 12px 32px rgba(255, 255, 255, .12),
        0 0 40px rgba(255, 255, 255, .08);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.14);
    --glass-bg-strong: rgba(255, 255, 255, 0.24);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(16px);

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.45s ease;

    /* Layers */
    --z-background: -2;
    --z-overlay: -1;
    --z-base: 1;
    --z-header: 1000;
    --z-modal: 9999;

    /* Content Größe */
    --content-width: 1200px;
    --header-height: 68px;

    /* Semantic Surfaces */
    --surface-header: rgba(255, 255, 255, .06);
    --surface-header-scrolled: rgba(255, 255, 255, .14);
    --surface-footer: rgba(255, 255, 255, .12);

    --surface-card: rgba(255, 255, 255, .84);
    --surface-card-soft: rgba(255, 255, 255, .78);
    --surface-card-hover: rgba(255, 255, 255, .9);

    --surface-chip: rgba(255, 255, 255, .35);
    --surface-social: rgba(255, 255, 255, .16);

    --border-soft: rgba(255, 255, 255, .10);
    --border-card: rgba(255, 255, 255, .75);

    --text-strong: #0f172a;
    --text-soft: rgba(31, 41, 55, .72);
    --text-invert: #ffffff;
    --text-on-hero: rgba(255, 255, 255, .92);

    /* Textmakierung */
    --selection-bg: rgba(242, 154, 58, .25);
    --selection-text: var(--text-strong);

    /* Link-Farbe */
    --link-color: var(--wp--preset--color--primary);
    --link-hover: var(--wp--preset--color--primary-hover);
}