/* ============================================================
   SHOPELENS – Design Tokens
   Zmień tutaj żeby przebudować cały wygląd serwisu
   ============================================================ */

:root {
  /* Kolory główne */
  --color-primary:        #1a3ed4;
  --color-primary-dark:   #1230a8;
  --color-primary-light:  #e8edff;
  --color-secondary:      #e91e8c;
  --color-accent:         #ffd600;

  /* Tła */
  --color-bg:             #ffffff;
  --color-bg-light:       #f4f6ff;
  --color-bg-section:     #f8f9fc;
  --color-hero-bg:        #eef1ff;

  /* Tekst */
  --color-text:           #1a1a2e;
  --color-text-muted:     #6b7280;
  --color-text-light:     #9ca3af;

  /* Obramowania */
  --color-border:         #e5e7eb;
  --color-border-light:   #f3f4f6;

  /* Status */
  --color-success:        #10b981;
  --color-success-bg:     #ecfdf5;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #fffbeb;
  --color-danger:         #ef4444;
  --color-danger-bg:      #fef2f2;
  --color-info:           #3b82f6;
  --color-info-bg:        #eff6ff;

  /* Typografia */
  --font-family:          'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-size-base:       16px;
  --font-size-sm:         14px;
  --font-size-xs:         12px;
  --font-size-lg:         18px;
  --font-size-xl:         22px;
  --font-size-2xl:        28px;
  --font-size-3xl:        36px;
  --font-size-4xl:        48px;
  --line-height:          1.6;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* Zaokrąglenia */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Cienie */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 10px 40px rgba(0,0,0,.12);
  --shadow-card: 0 2px 12px rgba(26,62,212,.08);

  /* Przejścia */
  --transition: .2s ease;

  /* Layout */
  --container-max:  1500px;
  --container-pad:  clamp(16px, 4vw, 40px);
  --nav-height:     120px;
}