/* ============================================================
   BKC DESIGN TOKENS — Björn Klein Catering
   Single Source of Truth für alle Farben, Fonts, Spacing, etc.
   ============================================================ */

:root {
  /* --- Colors --- */
  --bkc-bg:             #1E1E1E;
  --bkc-bg-secondary:   #2A2A2A;
  --bkc-bg-tertiary:    #111111;
  --bkc-bg-deep:        #0D0D0D;
  --bkc-bg-warm:        #1A1714;
  --bkc-text:           #F8F6F2;
  --bkc-text-muted:     #C8C5C0;
  --bkc-headline:       #FFFFFF;
  --bkc-accent:         #C4622D;
  --bkc-accent-hover:   #D4733E;
  --bkc-accent-dark:    #A8521F;
  --bkc-border:         #3A3A3A;
  --bkc-border-light:   rgba(255, 255, 255, 0.1);
  --bkc-overlay:        rgba(0, 0, 0, 0.55);
  --bkc-overlay-heavy:  rgba(0, 0, 0, 0.72);
  --bkc-card-shadow:    0 8px 40px rgba(0, 0, 0, 0.3);
  --bkc-whatsapp:       #25D366;

  /* --- Typography --- */
  --bkc-font-heading:   'Jost', 'Montserrat', -apple-system, sans-serif;
  --bkc-font-accent:    'Cormorant Garamond', Georgia, serif;
  --bkc-font-body:      'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;

  /* --- Font sizes (fluid, clamp) --- */
  --bkc-fs-h1:          clamp(2.5rem, 5vw, 4.5rem);    /* 40–72px */
  --bkc-fs-h2:          clamp(2rem, 3.5vw, 3.25rem);    /* 32–52px */
  --bkc-fs-h3:          clamp(1.5rem, 2.5vw, 2rem);     /* 24–32px */
  --bkc-fs-h4:          clamp(1.25rem, 2vw, 1.5rem);    /* 20–24px */
  --bkc-fs-body:        clamp(1rem, 1.1vw, 1.125rem);   /* 16–18px */
  --bkc-fs-small:       0.9375rem;                        /* 15px */
  --bkc-fs-label:       0.875rem;                        /* 14px */

  /* --- Font weights --- */
  --bkc-fw-regular:     400;
  --bkc-fw-medium:      500;
  --bkc-fw-semibold:    600;
  --bkc-fw-bold:        700;

  /* --- Spacing scale (8px base) --- */
  --bkc-space-xs:       0.5rem;    /* 8px */
  --bkc-space-sm:       1rem;      /* 16px */
  --bkc-space-md:       1.5rem;    /* 24px */
  --bkc-space-lg:       2rem;      /* 32px */
  --bkc-space-xl:       3rem;      /* 48px */
  --bkc-space-2xl:      4rem;      /* 64px */
  --bkc-space-3xl:      6rem;      /* 96px */
  --bkc-space-section:  clamp(4rem, 8vw, 7rem);  /* Section padding */

  /* --- Layout --- */
  --bkc-container:      1200px;
  --bkc-container-wide: 1400px;
  --bkc-container-narrow: 800px;
  --bkc-gutter:         1.5rem;    /* 24px */
  --bkc-header-height:  90px;

  /* --- Borders & Radius --- */
  --bkc-radius-sm:      4px;
  --bkc-radius-md:      8px;
  --bkc-radius-full:    50%;

  /* --- Transitions --- */
  --bkc-transition:     0.3s ease;
  --bkc-transition-slow: 0.6s ease;

  /* --- Breakpoints (for reference, used in media queries) ---
     Mobile:    < 576px
     Tablet:    576px – 991px
     Desktop:   992px – 1199px
     Wide:      ≥ 1200px
  */
}