/*
 * Weber Verpackung – Design System Variables
 * Quelle: Figma "Weber Verpackungen – Screendesign" (Screens + Styleguide + Components)
 * Generiert: 2026-04-16
 *
 * Struktur:
 *   1. Farben
 *   2. Typografie
 *   3. Spacing
 *   4. Border-Radius
 *   5. Layout & Container
 *   6. Schatten
 *   7. Breakpoints (über Media Queries)
 */

:root {

  /* =========================================================================
     1. FARBEN
     ========================================================================= */

  /* Marke – Grün */
  --c-green:        #036048;   /* Primary Brand Green */
  --c-green-med:    #5E9288;   /* Medium Green */
  --c-green-light:  #96BDB2;   /* Light Green / Tag-Farbe */

  /* Akzent – Pink */
  --c-pink:         #E63083;   /* Pink (kräftig) */
  --c-pink-med:     #EB849B;   /* Pink Medium / CTA-Hintergrund */
  --c-pink-light:   #ED98C1;   /* Pink Light / Tag-Farbe */

  /* Neutral */
  --c-night:        #121417;   /* Dunkelster Text */
  --c-dark:         #1B2321;   /* Primärtext / Dark-Hintergrund */
  --c-grey:         #EEEEEE;   /* Helle Flächen / Filter-Chips / Footer-BG */
  --c-grey-mid:     #E6E8E8;   /* Border-Farbe / Trennelemente */
  --c-bg:           #F8F9F9;   /* Seitenhintergrund / White Cards */
  --c-white:        #FFFFFF;   /* Reines Weiß */

  /* UI / Text */
  --c-text-secondary: #797979; /* Sekundärer Text / Labels */
  --c-text-muted:     #D2D2D2; /* Placeholder / sehr schwach */

  /* Rückwärts-Kompatibilität (alte Namen bleiben erhalten) */
  --weber-green:      #036048;
  --weber-midgreen:   #5E9288;
  --weber-dark-grey:  #1B2321;
  --weber-light-grey: #F8F9F9;
  --weber-white:      #FFFFFF;


  /* =========================================================================
     2. TYPOGRAFIE
     ========================================================================= */

  --font-heading:  'Poppins', sans-serif;  /* Headlines H1–H6 */
  --font-body:     'Poppins', sans-serif;  /* Fließtext / Buttons */
  --font-display:  'DM Serif Text', serif; /* Branding / Dekorativ */
  --font-ui:       'DM Sans', sans-serif;  /* UI-Labels (selten) */

  /* Desktop Font Sizes */
  --text-h1:    48px;  /* line-height: 1    weight: 400 */
  --text-h2:    40px;  /* line-height: 1    weight: 400 */
  --text-h3:    32px;  /* line-height: 1    weight: 400 */
  --text-h4:    28px;  /* line-height: 1    weight: 400 */
  --text-h5:    24px;  /* line-height: 1    weight: 400 */
  --text-h6:    20px;  /* line-height: 1    weight: 500  letter-spacing: 0.4px */
  --text-base:  16px;  /* line-height: 1.5  weight: 400 */
  --text-small: 13px;  /* line-height: normal weight: 400 */
  --text-hero:  96px;  /* Hero-Title Desktop Video  weight: 500 */
  --text-hero-alt: 64px; /* Hero-Title Desktop Picture weight: 500 */


  /* =========================================================================
     3. SPACING
     Quelle: Figma Variables Collection "Desktop" (9 Stufen) – als rem.
     Bricks setzt html { font-size: 62.5% } → 1rem = 10px.
     ========================================================================= */

  --space-xxs:  0.4rem;   /*  4px – Minimaler Gap (Filter-Row-Gap etc.) */
  --space-xs:   0.8rem;   /*  8px – Klein (Heading → Subtext, Tag-Abstand) */
  --space-s:    1.2rem;   /* 12px – Interne Card-Gaps, Logo-Spacing */
  --space-base: 1.6rem;   /* 16px – Standard-Innenabstand / Button-Padding-V */
  --space-sm:   2.8rem;   /* 28px – Footer-Links-Gap / Social-Icons-Gap */
  --space-l:    3.2rem;   /* 32px – Standard Card-Gap / Grid-Gutter / Nav-Links-Gap */
  --space-xl:   4.8rem;   /* 48px – Sektionsinterner Abstand (Heading → Grid) */
  --space-xxl:  7.2rem;   /* 72px – Größerer Sektionsabstand / Logo-Slider */
  --space-xxxl: 11.2rem;  /* 112px – Haupt-Sektionsabstand zwischen Content-Blöcken */


  /* =========================================================================
     4. BORDER-RADIUS
     ========================================================================= */

  --radius-card:   32px;  /* Alle Karten / Produkt-Cards / Feature-Cards / Bilder */
  --radius-btn:    16px;  /* Buttons / Tags / Filter-Chips */
  --radius-sm:     12px;  /* Kleine UI-Elemente (mobile Cards, Back-Icon) */
  --radius-xs:      8px;  /* Sehr kleine Elemente */
  --radius-icon:   25px;  /* Runde Social-Icons (40×40px) */


  /* =========================================================================
     5. LAYOUT & CONTAINER
     ========================================================================= */

  /* Desktop (1920px Canvas) */
  --container-px:       64px;    /* Seitliches Padding – ergibt 1792px Content */
  --container-max:    1792px;    /* Maximale Content-Breite */
  --container-max-pd: 1790px;    /* Produkt-Detail (1px Varianz aus Figma) */

  /* Navigation */
  --nav-height:       80px;     /* Scroll-State / Standard */
  --nav-height-home: 105px;     /* Home-State (größer) */

  /* Grid */
  --grid-gap:         32px;     /* Standard Card-Grid-Gutter */
  --grid-gap-sm:      28px;     /* Kleinerer Grid-Gutter (Home-Branchen) */
  --card-width:      424px;     /* Standard Card-Breite (4-spaltig) */
  --card-width-wide: 880px;     /* Breite Card (2 × 424 + 32) */

  /* Hero */
  --hero-height-video: 895px;
  --hero-height-img:   862px;


  /* =========================================================================
     6. SCHATTEN
     ========================================================================= */

  --shadow-nav:   0 0 8px rgba(0, 0, 0, 0.1);    /* Navigation */
  --shadow-card:  0 16px 40px rgba(0, 0, 0, 0.18); /* Card Hover */

}


/* ===========================================================================
   BREAKPOINT: Tablet (≤ 1024px)
   =========================================================================== */

@media (max-width: 1024px) {
  :root {
    --container-px:  40px;
    --grid-gap:      24px;
  }
}


/* ===========================================================================
   BREAKPOINT: Mobile (≤ 768px)
   Font Sizes, Container und Spacing werden auf Mobile-Werte gesetzt.
   =========================================================================== */

@media (max-width: 768px) {
  :root {
    /* Container */
    --container-px:   20px;   /* Primäre Mobile-Margin (aus Figma: 20px je Seite → 335px Content auf 375px) */
    --container-max:  335px;

    /* Nav */
    --nav-height:     57px;

    /* Grid */
    --grid-gap:       16px;

    /* Typografie – Mobile Scale */
    --text-h1:    40px;  /* Desktop: 48px */
    --text-h2:    32px;  /* Desktop: 40px */
    --text-h3:    28px;  /* Desktop: 32px */
    --text-h4:    22px;  /* Desktop: 28px */
    --text-h5:    18px;  /* Desktop: 24px */
    --text-h6:    14px;  /* Desktop: 20px */
    --text-base:  14px;  /* Desktop: 16px */
    --text-small: 12px;  /* Desktop: 13px */
  }
}