:root {
  /* ─── Kolory główne ─── */
  --color-primary:          #01783b;
  --color-primary-hover:    #018240;
  --color-primary-dark:     #014522;
  --color-primary-darker:   #015027;
  --color-accent:           #e94d02;
  --color-accent-dark:      #d54602;
  --color-white:            #fff;
  --color-black:            #000;
  /* ─── Skala szarości ─── */
  --color-gray-900:         #333;
  --color-gray-700:         #666;
  --color-gray-600:         #737373;
  --color-gray-500:         #7a7a7a;
  --color-gray-400:         #c4c3c3;
  --color-gray-350:         #e6e6e6;
  --color-gray-300:         #ddd;
  --color-gray-200:         #f7f7f7;
  --color-gray-100:         #f8f9fa;
  --color-border:           #ced4da;
  --color-text:             #666;
  --color-text-muted:       #6c757d;
  --color-text-disabled:    #888f9b;
  /* ─── Stany ─── */
  --color-danger:           #dc3545;
  --color-danger-dark:      #c82333;
  --color-danger-darker:    #bd2130;
  --color-danger-darkest:   #a71d2a;
  --color-success-dark:     #1e7e34;
  --color-success-toast:    #25b925;
  /* ─── Typografia ─── */
  --font-family-base:       Montserrat, sans-serif;
  --font-family-secondary:  Roboto, sans-serif;
  --font-size-xs:           .625rem;   /*  ~10px */
  --font-size-sm:           .75rem;    /*  ~12px */
  --font-size-base:         .875rem;   /*  ~14px */
  --font-size-md:           1rem;      /*  ~16px */
  --font-size-lg:           1.125rem;  /*  ~18px */
  --font-size-xl:           2rem;      /*  ~32px */
  /* ─── Zaokrąglenia ─── */
  --radius-sm:              .2rem;
  --radius:                 .3125rem;
  --radius-pill:            2.125rem;
  /* ─── Cienie ─── */
  --shadow-card:            0 0 20px 0 rgb(0 0 0 / 20%);
  --shadow-dropdown:        0 0 20px -5px rgb(0 0 0 / 15%);
  /* ─── Przejścia ─── */
  --transition-fast:        all .1s ease-out;
  --transition-base:        .2s ease-in-out;
  --transition-out:         all .2s ease-out;
  --transition-slow:        .4s;
  /* ─── Z-index ─── */
  --z-dropdown:             500;
  --z-sticky:               505;
  --z-modal:                1040;
  /* ─── Breakpoints ─── */
  --breakpoint-xs:          0;
  --breakpoint-sm:          576px;
  --breakpoint-md:          768px;
  --breakpoint-lg:          992px;
  --breakpoint-xl:          1200px;
  /*
   * ─── Aliasy wstecznej kompatybilności ───────────────────────────────────────
   * Używane w: header.css, forms.css, order.css
   * ────────────────────────────────────────────────────────────────────────────
   */
  --white:                  var(--color-white);
  --primary:                var(--color-primary);
  --primary-dark:           var(--color-primary-dark);
  --primary-light:          var(--color-primary-hover);
  --primary-text:           var(--color-primary);
  --primary-text-darker:    var(--color-primary-dark);
  --secondary-text:         var(--color-accent);
  --secondary-text-darker:  var(--color-accent-dark);
  --secondary-text-lighter: #fed1bb;
  --accent:                 var(--color-accent);
  --accent-darken:          var(--color-accent-dark);
  --disabled:               var(--color-text-disabled);
  --bg-color:               var(--color-gray-200);
  --border-radius:          var(--radius);
  --gray:                   var(--color-gray-600);
  --medium-gray:            var(--color-gray-700);
  --light-gray:             var(--color-gray-400);
  --gray-lighter:           var(--color-gray-300);
  --gray-darker:            var(--color-gray-900);
}
/* ─── Klasy pomocnicze ─── */
.text-green        { color: var(--color-primary) !important; }
.text-gray         { color: var(--color-gray-700); }
.text-gray-lighter { color: var(--color-gray-300); }