/**
 * ═══════════════════════════════════════════════════
 *  DESIGN SYSTEM — TOKENS
 *  Kadry w Naturze | kadrywnaturze.pl
 * ═══════════════════════════════════════════════════
 *
 *  ► Edytuj zmienne wizualnie:
 *    WP Admin → Wygląd → Dostosuj → "Design System – Kadry w Naturze"
 *
 *  Customizer nadpisuje wybrane zmienne przez :root {} inline CSS
 *  doklejany do tego pliku. Wartości poniżej są domyślnymi.
 * ═══════════════════════════════════════════════════
 *
 *  Wszystkie zmienne projektowe w jednym miejscu.
 *  Zmień wartości tutaj → zmiany rozejdą się po całej stronie.
 *
 *  Sekcje:
 *   1. Kolory (paleta bazowa + aliasy semantyczne)
 *   2. Typografia (kroje + skala + metryki)
 *   3. Odstępy (spacing scale)
 *   4. Layout
 *   5. Borders & Shadows
 *   6. Transitions
 */

:root {

  /* ══════════════════════════════════════
     1. KOLORY
     ══════════════════════════════════════ */

  /* Paleta bazowa — nie używaj bezpośrednio w komponentach */
  --palette-forest:      #2f3e2f;
  --palette-sage:        #6b8e6e;
  --palette-gold:        #c2a46f;
  --palette-amber:       #a67c52;
  --palette-cream:       #f4f1ea;
  --palette-cream-alt:   #f9f7f2;
  --palette-ink:         #1e1e1e;
  --palette-white:       #ffffff;

  /* Aliasy semantyczne — modyfikuj te zmienne przy zmianie motywu */
  --color-primary:          var(--palette-forest);
  --color-primary-hover:    var(--palette-sage);
  --color-accent:           var(--palette-gold);
  --color-accent-hover:     var(--palette-amber);

  --color-bg:               var(--palette-cream);
  --color-bg-alt:           var(--palette-cream-alt);
  --color-bg-dark:          var(--palette-forest);
  --color-bg-ink:           var(--palette-ink);

  --color-text:             var(--palette-ink);
  --color-text-muted:       #555555;
  --color-text-light:       #888888;
  --color-text-on-dark:     var(--palette-cream);

  --color-border:           rgba(107, 142, 110, 0.22);
  --color-border-subtle:    rgba(107, 142, 110, 0.12);
  --color-border-accent:    var(--palette-gold);

  --color-overlay-green:    rgba(47, 62, 47, 0.35);
  --color-overlay-dark:     rgba(30, 30, 30, 0.55);
  --color-portfolio-hover:  rgba(47, 62, 47, 0.62);


  /* ══════════════════════════════════════
     2. TYPOGRAFIA
     ══════════════════════════════════════ */

  /* Kroje pisma */
  --font-heading:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;
  --font-script:   'Allura', cursive;

  /* Skala wielkości — modyfikuj bazową wielkość lub poszczególne stopnie */
  --text-2xs:   0.6rem;    /*   9.6px */
  --text-xs:    0.68rem;   /*  10.9px */
  --text-sm:    0.75rem;   /*  12px   */
  --text-base:  0.875rem;  /*  14px   */
  --text-md:    1rem;      /*  16px   */
  --text-lg:    1.125rem;  /*  18px   */
  --text-xl:    1.25rem;   /*  20px   */
  --text-2xl:   1.5rem;    /*  24px   */
  --text-3xl:   2rem;      /*  32px   */
  --text-4xl:   2.5rem;    /*  40px   */
  --text-5xl:   3.4rem;    /*  54.4px */
  --text-hero:  clamp(3.5rem, 9vw, 7rem);

  /* Skrypt / dekoracyjny */
  --text-script-sm:  1.3rem;
  --text-script-md:  1.55rem;
  --text-script-lg:  2.2rem;

  /* Wysokości linii */
  --leading-none:     1;
  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.65;
  --leading-relaxed:  1.82;

  /* Odstępy między literami */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0.02em;
  --tracking-wide:     0.13em;
  --tracking-wider:    0.2em;
  --tracking-widest:   0.3em;


  /* ══════════════════════════════════════
     3. ODSTĘPY (spacing scale, 4px base)
     ══════════════════════════════════════ */

  --space-1:    0.25rem;   /*   4px */
  --space-2:    0.5rem;    /*   8px */
  --space-3:    0.75rem;   /*  12px */
  --space-4:    1rem;      /*  16px */
  --space-5:    1.25rem;   /*  20px */
  --space-6:    1.5rem;    /*  24px */
  --space-7:    1.75rem;   /*  28px */
  --space-8:    2rem;      /*  32px */
  --space-10:   2.5rem;    /*  40px */
  --space-12:   3rem;      /*  48px */
  --space-14:   3.5rem;    /*  56px */
  --space-16:   4rem;      /*  64px */
  --space-20:   5rem;      /*  80px */
  --space-24:   6rem;      /*  96px */
  --space-28:   7rem;      /* 112px */

  /* Padding sekcji — zmieniaj tutaj, by skalować całą stronę */
  --section-py:   var(--space-28);
  --section-px:   var(--space-8);


  /* ══════════════════════════════════════
     4. LAYOUT
     ══════════════════════════════════════ */

  --max-width:        1200px;
  --max-width-wide:   1380px;
  --nav-height:       68px;
  --gap-grid:         1.5rem;
  --gap-small:        0.9rem;
  --gap-xs:           0.5rem;


  /* ══════════════════════════════════════
     5. BORDERS & SHADOWS
     ══════════════════════════════════════ */

  --border-width:   1.5px;
  --border:         var(--border-width) solid var(--color-border);
  --border-accent:  var(--border-width) solid var(--color-border-accent);

  --shadow-card:    0 22px 44px rgba(47, 62, 47, 0.1);
  --shadow-nav:     0 1px 0 rgba(107, 142, 110, 0.18);


  /* ══════════════════════════════════════
     6. TRANSITIONS
     ══════════════════════════════════════ */

  --ease-fast:   0.2s ease;
  --ease-mid:    0.35s ease;
  --ease-slow:   0.55s ease;
  --ease-menu:   0.45s cubic-bezier(0.77, 0, 0.18, 1);
}