/**
 * DAXBERGER DESIGN SYSTEM
 * Farbschema & Variablen für Hybrid-Design
 * Metall-kantig verschmolzen mit Holz-warm
 */

:root {
  /* ===================================
     METALL / SCHLOSSEREI FARBEN
     Heller, freundlicher, professionell
     =================================== */
  --metal-black: #2c3e50;          /* Dunkelblau-Grau statt pechschwarz */
  --metal-black-lighter: #34495e;
  --metal-orange: #f39c12;         /* Warmes Orange */
  --metal-orange-dark: #e67e22;    /* Dunkler für Hover */
  --metal-orange-light: #f9ca24;   /* Heller Akzent */
  --metal-gray-dark: #555555;
  --metal-gray: #7f8c8d;
  --metal-gray-light: #ecf0f1;     /* Sehr helles Grau */
  --metal-gray-border: #bdc3c7;
  --metal-white: #ffffff;
  --metal-blue: #3498db;           /* Freundliches Blau */
  --metal-blue-light: #5dade2;
  
  /* Metall-Effekte (weicher) */
  --metal-shadow-hard: 0 4px 12px rgba(0, 0, 0, 0.15);
  --metal-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --metal-glow: 0 0 20px rgba(243, 156, 18, 0.3);
  
  /* ===================================
     HOLZ / TINY HOUSE FARBEN
     Warm, natürlich, einladend
     =================================== */
  --wood-dark: #8B6F47;
  --wood-medium: #B8956A;
  --wood-light: #D4A574;
  --wood-beige: #F5E6D3;
  --wood-white: #FAF8F5;
  --wood-cream: #FFF8F0;
  
  /* Holz-Akzente */
  --wood-accent-dark: #6B4423;
  --wood-accent-light: #E6D5C3;
  
  /* Holz-Effekte */
  --wood-shadow-soft: 0 10px 40px rgba(139, 111, 71, 0.15);
  --wood-shadow-medium: 0 6px 24px rgba(139, 111, 71, 0.2);
  
  /* ===================================
     GRADIENTEN & ÜBERGÄNGE
     Verschmelzung von Metall zu Holz
     =================================== */
  --gradient-metal-to-wood: linear-gradient(135deg, #1a1a1a 0%, #8B6F47 100%);
  --gradient-metal-horizontal: linear-gradient(to right, #1a1a1a 0%, #2a2a2a 100%);
  --gradient-wood-horizontal: linear-gradient(to right, #8B6F47 0%, #D4A574 100%);
  --gradient-orange: linear-gradient(to right, #f7a81b 0%, #fbc02d 100%);
  
  /* Übergang Sections */
  --transition-metal-wood: linear-gradient(to bottom, #f5f5f5 0%, #F5E6D3 100%);
  
  /* ===================================
     TYPOGRAFIE
     Montserrat für Headlines (kantig)
     Open Sans für Body (lesbar)
     =================================== */
  --font-headline: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  
  /* ===================================
     SPACING
     Konsistente Abstände
     =================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* ===================================
     BORDER RADIUS
     Metall = 0 (eckig), Holz = leicht abgerundet
     =================================== */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  
  /* ===================================
     TRANSITIONS
     Smooth Animationen
     =================================== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 700ms ease;
  
  /* ===================================
     BREAKPOINTS (für Media Queries)
     Mobile-First Approach
     =================================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ===================================
     Z-INDEX
     Layering System
     =================================== */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===================================
     LAYOUT
     Container & Spacing
     =================================== */
  --container-max-width: 1280px;
  --container-padding: var(--space-4);
  --section-padding-y: var(--space-24);
  --section-padding-mobile: var(--space-16);
}

/* ===================================
   DARK MODE OVERRIDES (Optional)
   Falls später Dark Mode gewünscht
   =================================== */
@media (prefers-color-scheme: dark) {
  /* Hier Dark Mode Varianten definieren wenn gewünscht */
}

/* ===================================
   UTILITY CLASSES
   Häufig verwendete Kombinationen
   =================================== */

/* Text Gradients */
.text-gradient-orange {
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-metal-wood {
  background: var(--gradient-metal-to-wood);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Background Patterns */
.pattern-grid-metal {
  background-image: 
    linear-gradient(rgba(247, 168, 27, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 168, 27, 0.1) 1px, transparent 1px);
  background-size: 80px 80px;
}

.pattern-grid-wood {
  background-image: 
    linear-gradient(rgba(139, 111, 71, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 111, 71, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Textur-Overlay (subtile Holzmaserung) */
.texture-wood {
  position: relative;
}

.texture-wood::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(139, 111, 71, 0.03) 2px,
      rgba(139, 111, 71, 0.03) 4px
    );
  pointer-events: none;
}

/* Metall-Glanz Effekt */
.shine-metal {
  position: relative;
  overflow: hidden;
}

.shine-metal::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
}