:root {
  /* ============================================
     KARLS BRAND COLORS
     ============================================ */
  
  /* Karls Rot */
  --color-primary: #e30613;
  --color-primary-hover: #c00510;
  
  /* Karls Grün */
  --color-secondary: #79b51c;
  --color-secondary-hover: #5a8615;
  
  /* Backgrounds */
  --color-bg-main: #ffffff;
  --color-bg-light: #f7f7f7;
  --color-bg-pink: #fef5f5;
  
  /* Text */
  --color-text: #272727;
  --color-text-light: #666666;
  
  /* ============================================
     TYPOGRAPHY - KARLS FONTS
     ============================================ */
  
  --font-heading: 'HammersmithOne-Regular', sans-serif;
  --font-body: 'roboto-v30-latin-regular', Arial, sans-serif;
  --font-special: 'Arnet-Bold', serif;
  
  --font-size-base: 16px;
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  
  /* ============================================
     SPACING
     ============================================ */
  
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;
  
  /* ============================================
     KARLS DESIGN SYSTEM
     ============================================ */
  
  --radius: 20px;
  --shadow-karls: 0 3px 10px rgba(0, 0, 0, 0.16);
  --transition: 0.3s ease;
  
  --container-width: 1200px;
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
  }
}

/* ============================================
   FONT FACES
   ============================================ */

@font-face {
  font-family: 'HammersmithOne-Regular';
  src: url('/public/fonts/HammersmithOne-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'roboto-v30-latin-regular';
  src: url('/public/fonts/roboto-v30-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Arnet-Regular';
  src: url('/public/fonts/Arnet-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Arnet-Bold';
  src: url('/public/fonts/Arnet-Bold.woff2') format('woff2');
  font-display: swap;
}