/* ============================================================
   DESIGN TOKENS – szkoleniamarketingowe.pl
   Centralne zmienne CSS. Zmieniaj tu, by wpłynąć na cały serwis.
   ============================================================ */
:root {
  /* --- KOLORY BAZOWE --- */
  --color-white:       #ffffff;
  --color-bg:          #fafaf8;
  --color-gray-50:     #f5f5f2;
  --color-gray-100:    #eeede9;
  --color-gray-200:    #e0dfdb;
  --color-gray-400:    #9e9e98;
  --color-gray-600:    #6b6b65;
  --color-text:        #2e2e2c;
  --color-heading:     #1a1a18;   /* ciemny grafit */

  /* --- KOLORY AKCENTÓW --- */
  /* ciemna oliwka */
  --color-olive:        #556B2F;
  --color-olive-dark:   #3d4f22;
  --color-olive-bg:     #f4f5f0;   /* bardzo jasne tło oliwkowe */
  --color-olive-border: #d4d9c8;

  /* szałwia */
  --color-sage:         #A8B8A1;
  --color-sage-dark:    #7a9070;

  /* ciepły pomarańcz */
  --color-orange:       #D97A28;
  --color-orange-dark:  #b8621e;
  --color-orange-bg:    #fdf5ec;

  /* --- ALIASY FUNKCJONALNE --- */
  --color-link:         var(--color-olive);
  --color-link-hover:   var(--color-orange);
  --color-cta:          var(--color-orange);
  --color-cta-hover:    var(--color-orange-dark);
  --color-accent:       var(--color-olive);
  --color-accent-bg:    var(--color-olive-bg);
  --color-accent-border:var(--color-olive-border);

  /* --- TYPOGRAFIA --- */
  --font-family: 'Gotham', 'Inter', 'Source Sans Pro', 'Open Sans', system-ui, sans-serif;

  --font-size-base:  14px;   /* treść artykułu */
  --font-size-lead:  15px;   /* lead, intro */
  --font-size-nav:   15px;   /* nawigacja */
  --font-size-h1:    28px;
  --font-size-h2:    20px;
  --font-size-h3:    16px;
  --font-size-small: 12px;
  --font-size-meta:  13px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-heading: 1.2;
  --line-height-text:    1.5;   /* ~120% jak w książce */
  --line-height-tight:   1.2;

  /* --- ODSTĘPY (umiarkowane) --- */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;

  /* --- UKŁAD --- */
  --container-max:   1200px;
  --content-max:     760px;
  --nav-height:      62px;

  /* --- ELEMENTY UI --- */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  12px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 2px 10px rgba(0,0,0,0.09);

  --transition: 0.18s ease;

  /* --- NAWIGACJA --- */
  --nav-bg:     #ffffff;
  --nav-border: var(--color-gray-200);
  --nav-shadow: 0 1px 3px rgba(0,0,0,0.07);

  /* --- HERO --- */
  --hero-height:    300px;
  --hero-height-md: 380px;
}

/* --- RESPONSYWNA TYPOGRAFIA (mobile) --- */
@media (max-width: 639px) {
  :root {
    --font-size-h1: 21px;
    --font-size-h2: 17px;
    --font-size-h3: 15px;
    --font-size-lead: 14px;
  }
}