/**
 * HELUKABEL Design Tokens
 * Extracted from helukabel.de website analysis
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */

  /* Primary Colors */
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
  --color-brand-cyan: rgb(27, 188, 232);
  --color-brand-red: #B71C1C; /* From logo */

  /* Grays */
  --color-gray-medium: rgb(118, 118, 118);
  --color-gray-light: rgb(244, 244, 244);
  --color-gray-lighter: rgb(247, 250, 252);

  /* Accent Colors */
  --color-accent-orange: rgb(191, 104, 69); /* CTA buttons */

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --font-primary: 'Poppins', sans-serif;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-h1: 44px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Line Heights */
  --line-height-base: 1.429;

  /* ============================================
     SPACING
     ============================================ */

  /* Container Padding */
  --container-padding-desktop: 80px;
  --container-padding-mobile: 20px;

  /* Component Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-xxl: 80px;

  /* ============================================
     LAYOUT
     ============================================ */

  /* Header */
  --header-height: 160px;

  /* Footer */
  --footer-padding: 40px;

  /* ============================================
     BUTTONS
     ============================================ */

  --button-border-radius: 0px;

  /* ============================================
     EFFECTS & ANIMATIONS
     ============================================ */

  --transition-default: all 0.3s ease;
  --transition-fast: all 0.15s ease;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */

  --z-index-header: 500;
}