/* ============================================
   LUNCHERBOX - DESIGN TOKENS
   Źródło wartości: design-guidelines-luncherbox.md
   Zmień tu, żeby zmienić kolorystykę/typografię całej strony.
   ============================================ */
:root {
  /* Kolory */
  --red:          #A81916;
  --red-dark:     #8E1412;
  --red-darker:   #7A100E;
  --red-tint:     #FFF5F4;
  --dark:         #3C3C3B;
  --text:         #212121;
  --text-muted:   #4B4B4B;
  --text-light:   #888887;
  --surface:      #FAFAFA;
  --white:        #FFFFFF;
  --border:       #E8E8E7;
  --border-light: #F0F0EF;

  /* Fonty */
  --font-head: 'K2D', sans-serif;
  --font-body: 'Karla', sans-serif;

  /* Spacing (skala pomocnicza) */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 120px;

  /* Layout */
  --max-w:  1360px;
  --gutter: 80px;

  /* Border radius - wg design-guidelines sekcja 4 */
  --radius-btn:  4px;
  --radius-card: 6px;
  --radius-pill: 50px;
  /* Uzupełnienie (nieopisane w guidelines): duże kontenery graficzne - hero, zdjęcia */
  --radius-media: 8px;

  /* Cienie */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}