/* ============================================
   ALC Metalltechnik GmbH - CSS Custom Properties
   schlossermeister.cc
   ============================================ */

:root {
  /* Primaerfarben - inspiriert von Cortenstahl */
  --color-primary: #8B4513;
  --color-primary-dark: #6B3410;
  --color-primary-light: #A0522D;

  /* Akzentfarbe (nur dekorativ: Borders, Icons, grosse Zahlen/Text auf DUNKLEM Grund) */
  --color-accent: #D4A574;
  /* Barrierefreie Akzent-Variante fuer TEXT auf HELLEM Grund (WCAG AA, >=4.5:1 auf Weiss) */
  --color-accent-text: #8A6A42;

  /* Neutrale Toene */
  --color-dark: #1A1A1A;
  --color-gray-dark: #333333;
  --color-gray: #666666;
  --color-gray-light: #F5F5F0;
  --color-white: #FFFFFF;

  /* Funktionale Farben
     CTA abgedunkelt auf #A04A0F: weisser Text erreicht so 6.03:1 (WCAG AA fuer
     Normal- UND Kleintext). Das alte #C75B12 lag bei nur 4.26:1 und fiel bei
     jeder Button-Groesse durch. Hover noch dunkler fuer klare Abgrenzung. */
  --color-cta: #A04A0F;
  --color-cta-hover: #7C380B;
  --color-success: #2E7D32;
  --color-error: #C62828;

  /* Typografie */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 18px;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;

  /* Abstands-System */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Container */
  --container-max: 1200px;
  --container-padding: 1.5rem;

  /* Border-Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Header */
  --header-height: 80px;
  --header-height-scrolled: 60px;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --color-dark: #E8E8E8;
  --color-gray-dark: #CCCCCC;
  --color-gray: #999999;
  --color-gray-light: #2A2A2A;
  --color-white: #1A1A1A;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.3);
}

/* Breakpoints (fuer Referenz):
   Mobile:      < 480px
   Tablet:      >= 768px
   Desktop:     >= 1024px
   Wide:        >= 1200px
*/