/**
 * DESIGN SYSTEM - CSS CUSTOM PROPERTIES
 * Auto-Ankauf Website
 * 
 * Diese Datei enthält alle globalen Design-Tokens
 */

:root {
  /* ==========================================
     FARBEN
     ========================================== */
  
  /* Basis Farben */
  --color-black: #000000;
  --color-white: #FFFFFF;
  
  /* Gold Farben */
  --color-light-gold: #FFD56C;
  --color-dark-gold: #CD891D;
  
  /* Grau-Töne */
  --color-bg-grey: #161616;
  --color-border-grey: #393939;
  --color-light-grey: #9B9B9B;
  --color-bg-light-grey: #F6F8F9;
  --color-border-light-grey: #DBDBDC;
  --color-dark-grey-box: #282828;
  
  /* Gradient Farben */
  --gradient-accent: radial-gradient(circle, var(--color-dark-gold) 0%, var(--color-light-gold) 50%, var(--color-dark-gold) 100%);
  --gradient-button: linear-gradient(135deg, var(--color-dark-gold), var(--color-light-gold));
  
  /* Button Farben */
  --black-color-button-font: var(--color-black);
  --white-color-button-font: var(--color-white);
  
  
  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Family */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes - Desktop */
  --font-size-h1: 50px;
  --font-size-h2: 40px;
  --font-size-h3: 35px;
  --font-size-h4: 30px;
  --font-size-h5: 25px;
  --font-size-h6: 20px;
  --font-size-accent: 20px;
  --font-size-paragraph-large: 20px;
  --font-size-paragraph: 16px;
  --font-size-button-small: 16px;
  --font-size-button-large-main: 20px;
  --font-size-button-large-sub: 16px;
  
  /* Line Height */
  --line-height-auto: 1.3em;
  
  
  /* ==========================================
     SPACING & LAYOUT
     ========================================== */
  
  /* Spacing Scale */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  
  /* Container */
  --container-max-width: 1300px;
  --container-padding: var(--spacing-md);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  
  /* ==========================================
     ANIMATIONS
     ========================================== */
  
  /* Timing Functions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Durations */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-pulse: 2s;
  
  
  /* ==========================================
     SHADOWS
     ========================================== */
  
  --shadow-sm: 0 0px 15px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
  
  /* Button Glow */
  --glow-button: 0 4px 20px rgba(255, 213, 108, 0.4);
}


/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Tablet */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 26px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-accent: 18px;
    --font-size-paragraph-large: 18px;
    --font-size-button-large-main: 18px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    --font-size-accent: 16px;
    --font-size-paragraph-large: 16px;
    --font-size-button-large-main: 16px;
    
    --container-padding: var(--spacing-sm);
  }
}