:root {
  --yop-primary: #2563FF;
  --yop-premium: #8A1538;
  --yop-bg: #F7F9FC;
  --yop-card: #FFFFFF;
  --yop-text: #0F172A;
  --yop-muted: #64748B;
  --yop-border: #E5E7EB;
  --yop-success: #22C55E;
  --yop-warning: #F97316;
  --yop-black: #111111;
  --yop-germany-red: #DD0000;
  --yop-germany-gold: #FFCC00;

  --yop-gradient-primary: linear-gradient(135deg, #2563FF 0%, #7C3AED 56%, #C026D3 100%);
  --yop-gradient-premium: linear-gradient(135deg, #2563FF 0%, #8A1538 100%);
  --yop-gradient-soft: radial-gradient(circle at 10% 10%, rgba(37, 99, 255, .13), transparent 30%), radial-gradient(circle at 88% 16%, rgba(138, 21, 56, .12), transparent 32%), #F7F9FC;

  --yop-font: "Inter", "Poppins", "Segoe UI", sans-serif;
  --yop-radius-sm: 10px;
  --yop-radius-md: 16px;
  --yop-radius-lg: 24px;
  --yop-radius-xl: 32px;
  --yop-radius-pill: 999px;

  --yop-space-1: .25rem;
  --yop-space-2: .5rem;
  --yop-space-3: .75rem;
  --yop-space-4: 1rem;
  --yop-space-5: 1.25rem;
  --yop-space-6: 1.5rem;
  --yop-space-8: 2rem;
  --yop-space-10: 2.5rem;
  --yop-space-12: 3rem;
  --yop-space-16: 4rem;

  --yop-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --yop-shadow-premium: 0 20px 60px rgba(15, 23, 42, 0.12);
  --yop-shadow-focus: 0 0 0 4px rgba(37, 99, 255, .16);

  --yop-container: 1180px;
  --yop-z-nav: 1000;
  --yop-z-overlay: 2000;
  --yop-transition: 180ms ease;
}