/* ══ MacherTV Design System v3 — Premium Award-Level ══ */

:root {
    /* ── Brand ── */
    --mtv-primary: #233DFF;
    --mtv-primary-light: #4D63FF;
    --mtv-primary-dark: #1A2FCC;
    --mtv-primary-glow: rgba(35, 61, 255, 0.2);
    --mtv-primary-subtle: rgba(35, 61, 255, 0.06);

    /* ── CTA = Brand Blue (kein Grün mehr) ── */
    --mtv-cta-primary: var(--mtv-primary);
    --mtv-cta-primary-hover: var(--mtv-primary-dark);

    /* ── Semantic ── */
    --mtv-success: #10B981;
    --mtv-warning: #F59E0B;
    --mtv-danger: #EF4444;
    --mtv-info: #06B6D4;
    --mtv-secondary: #8B5CF6;
    --mtv-accent: #F59E0B;
    --mtv-accent-light: #FBBF24;

    /* ── Surfaces ── */
    --mtv-bg-dark: #0C0F1A;
    --mtv-bg-card: #FFFFFF;
    --mtv-bg-card-hover: #FAFBFE;
    --mtv-bg-elevated: #FFFFFF;
    --mtv-bg-light: #F8FAFF;
    --mtv-bg-white: #FFFFFF;
    --mtv-bg-subtle: #F1F5FF;
    --mtv-bg-warm: #FEFCF9;

    /* ── Text ── */
    --mtv-text-dark: #0F172A;
    --mtv-text-body: #475569;
    --mtv-text-muted: #64748B;
    --mtv-text-white: #F8FAFC;

    /* ── Borders ── */
    --mtv-border: rgba(255, 255, 255, 0.08);
    --mtv-border-light: #E8ECF4;

    /* ── Gray Scale (Werbungmacher.de) ── */
    --mtv-gray-50: #F9FAFB;
    --mtv-gray-100: #F3F4F6;
    --mtv-gray-200: #E5E7EB;
    --mtv-gray-300: #D1D5DB;
    --mtv-gray-400: #9CA3AF;
    --mtv-gray-500: #6B7280;
    --mtv-gray-600: #4B5563;
    --mtv-gray-700: #374151;
    --mtv-gray-800: #1F2937;
    --mtv-gray-900: #111827;

    /* ── Shadows (Werbungmacher.de) ── */
    --mtv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --mtv-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.04);
    --mtv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04);
    --mtv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.06);
    --mtv-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.06);
    --mtv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.04);
    --mtv-shadow-card-hover: 0 4px 12px rgba(35, 61, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.06);
    --mtv-shadow-glow: 0 0 60px var(--mtv-primary-glow);
    --mtv-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.04);

    /* ── Border Radius (Werbungmacher.de) ── */
    --mtv-radius-sm: 4px;
    --mtv-radius: 8px;
    --mtv-radius-md: 8px;
    --mtv-radius-lg: 12px;
    --mtv-radius-xl: 16px;
    --mtv-radius-2xl: 24px;
    --mtv-radius-full: 9999px;

    /* ── Transitions (smooth, nicht spring) ── */
    --mtv-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --mtv-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --mtv-transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Typography ── */
    --mtv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Spacing (4px base, consolidated) ── */
    --mtv-space-1: 0.25rem;    /* 4px */
    --mtv-space-2: 0.5rem;     /* 8px */
    --mtv-space-3: 0.75rem;    /* 12px */
    --mtv-space-4: 1rem;       /* 16px */
    --mtv-space-5: 1.25rem;    /* 20px */
    --mtv-space-6: 1.5rem;     /* 24px */
    --mtv-space-8: 2rem;       /* 32px */
    --mtv-space-10: 2.5rem;    /* 40px */
    --mtv-space-12: 3rem;      /* 48px */
    --mtv-space-16: 4rem;      /* 64px */
    --mtv-space-20: 5rem;      /* 80px */
    --mtv-space-24: 6rem;      /* 96px */

    /* Legacy aliases (backward compat) */
    --space-1: var(--mtv-space-1);
    --space-2: var(--mtv-space-2);
    --space-3: var(--mtv-space-3);
    --space-4: var(--mtv-space-4);
    --space-5: var(--mtv-space-6);
    --space-6: var(--mtv-space-8);
    --space-8: var(--mtv-space-12);
    --space-10: var(--mtv-space-16);
    --space-12: var(--mtv-space-20);
    --space-16: var(--mtv-space-24);
    --mtv-space-xs: var(--mtv-space-1);
    --mtv-space-sm: var(--mtv-space-2);
    --mtv-space-md: var(--mtv-space-4);
    --mtv-space-lg: var(--mtv-space-6);
    --mtv-space-xl: var(--mtv-space-8);
    --mtv-space-2xl: var(--mtv-space-12);
    --mtv-space-3xl: var(--mtv-space-16);
    --mtv-space-4xl: var(--mtv-space-24);
    --mtv-space-5xl: var(--mtv-space-24);

    /* ── Z-index ── */
    --mtv-z-dropdown: 1000;
    --mtv-z-sticky: 1020;
    --mtv-z-navbar: 1030;
    --mtv-z-modal: 1050;
    --mtv-z-toast: 1080;

    /* ── Icon sizes ── */
    --mtv-icon-size: 44px;
    --mtv-icon-size-lg: 64px;

    /* ── Gradients (subtil, premium) ── */
    --mtv-gradient-primary: linear-gradient(135deg, #233DFF, #1A2FCC);
    --mtv-gradient-hero: linear-gradient(160deg, #fff 0%, rgba(35,61,255,.03) 40%, rgba(35,61,255,.06) 100%);
    --mtv-gradient-accent: linear-gradient(135deg, var(--mtv-accent), #f97316);
    --mtv-gradient-cta: linear-gradient(135deg, #233DFF, #4D63FF);
    --mtv-gradient-subtle: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
    --mtv-gradient-warm: linear-gradient(180deg, #FEFCF9 0%, #FFFFFF 100%);
    --mtv-gradient-section: linear-gradient(180deg, rgba(35, 61, 255, 0.03) 0%, rgba(139, 92, 246, 0.02) 100%);
    --mtv-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    --mtv-gradient-dark: linear-gradient(180deg, #0C0F1A 0%, #141B2D 100%);

    /* ── Alias: --mtv-dark ── */
    --mtv-dark: var(--mtv-bg-dark);

    /* ── Primary Palette (50-900) ── */
    --mtv-color-primary: #233DFF;
    --mtv-color-primary-50: #EFF6FF;
    --mtv-color-primary-100: #DBEAFE;
    --mtv-color-primary-200: #BFDBFE;
    --mtv-color-primary-300: #93C5FD;
    --mtv-color-primary-400: #4D63FF;
    --mtv-color-primary-500: #233DFF;
    --mtv-color-primary-600: #1A2FCC;
    --mtv-color-primary-700: #1E40AF;
    --mtv-color-primary-800: #1E3A8A;
    --mtv-color-primary-900: #172554;

    /* ── Font System ── */
    --mtv-font-sans: var(--mtv-font);
    --mtv-font-size-xs: 0.75rem;
    --mtv-font-size-sm: 0.875rem;
    --mtv-font-size-base: 1rem;
    --mtv-font-size-lg: 1.125rem;
    --mtv-font-size-xl: 1.25rem;
    --mtv-font-size-2xl: 1.5rem;
    --mtv-font-size-3xl: 1.875rem;
    --mtv-font-size-4xl: 2.25rem;

    /* ── Fluid Typography (responsive, no media queries needed) ── */
    --mtv-text-hero: clamp(2rem, 1rem + 4vw, 3.5rem);
    --mtv-text-h1: clamp(1.75rem, 1rem + 3vw, 2.5rem);
    --mtv-text-h2: clamp(1.5rem, 0.75rem + 2.5vw, 2rem);
    --mtv-text-h3: clamp(1.25rem, 0.75rem + 2vw, 1.5rem);
    --mtv-text-h4: clamp(1.1rem, 0.75rem + 1.5vw, 1.25rem);
    --mtv-text-body: 1rem;
    --mtv-text-sm: 0.875rem;
    --mtv-text-xs: 0.75rem;

    /* ── Premium Utility Tokens ── */
    --mtv-bg-primary-subtle: rgba(35, 61, 255, 0.06);
    --mtv-bg-primary-hover: rgba(35, 61, 255, 0.08);
    --mtv-bg-primary-active: rgba(35, 61, 255, 0.12);
    --mtv-focus-ring: 0 0 0 3px rgba(35, 61, 255, 0.2);
    --mtv-section-padding: clamp(3rem, 5vw, 5rem);
    --mtv-container-max: 1320px;
    --mtv-prose-max: 720px;
    --mtv-font-weight-normal: 400;
    --mtv-font-weight-medium: 500;
    --mtv-font-weight-semibold: 600;
    --mtv-font-weight-bold: 700;
    --mtv-line-height-tight: 1.25;
    --mtv-line-height-normal: 1.5;
    --mtv-line-height-relaxed: 1.75;
}