/* Cashify Gold — design tokens
 * Źródło: Figma „cashify.eu - strona" → strona „cashify gold - ecommerce"
 * Wyciągnięte przez Figma MCP 2026-07-12. NIE edytuj ręcznie bez zmiany w Figmie.
 */

:root {
  /* --- Kolory marki --- */
  --cg-gold:              #C18C21;              /* „gold flat" — cena, ramki, akcenty */
  --cg-gold-10:           rgba(193, 140, 33, .1); /* tło plakietek cenowych */
  --cg-gold-grad-from:    #BF8A1F;
  --cg-gold-grad-to:      #F9E488;
  /* „button gradient cashigold" — kąt bywa 74–85° zależnie od elementu; ujednolicony na 80° */
  --cg-gold-gradient:     linear-gradient(80deg, var(--cg-gold-grad-from) 0%, var(--cg-gold-grad-to) 100%);

  /* „cashigreen background" — radialny, od zieleni w prawym górnym rogu do czerni */
  --cg-green:             #12472B;
  --cg-green-mid:         #092416;
  --cg-green-gradient:    radial-gradient(120% 340% at 100% 0%,
                            #12472B 0%, #092416 50%, #05120B 75%, #020905 87.5%, #000000 100%);

  /* --- Neutralne (Figma trzyma je jako czarny/biały z alfą) --- */
  --cg-black:             #000000;
  --cg-text:              rgba(0, 0, 0, .7);   /* podstawowy kolor tekstu i etykiet przycisków */
  --cg-black-30:          rgba(0, 0, 0, .3);
  --cg-black-20:          rgba(0, 0, 0, .2);
  --cg-black-10:          rgba(0, 0, 0, .1);
  --cg-black-05:          rgba(0, 0, 0, .05);  /* tło kafla ze zdjęciem produktu */
  --cg-black-02:          rgba(0, 0, 0, .02);  /* tło karty produktu */
  --cg-white:             #FFFFFF;
  --cg-white-10:          rgba(255, 255, 255, .1);
  --cg-white-05:          rgba(255, 255, 255, .05);

  /* --- Semantyczne --- */
  --cg-success:           #4CAF50;             /* plakietka „Wysyłka 24h" */
  --cg-success-10:        rgba(76, 175, 80, .1);

  /* --- Typografia --- */
  --cg-font:              'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cg-fw-medium:         500;                 /* CAŁY projekt jedzie na Poppins Medium */
  --cg-tracking:          -0.04em;             /* stałe w całym projekcie (-0.56px@14, -1.92px@48) */

  --cg-fs-h1:             48px;  --cg-lh-h1: 1.12;
  --cg-fs-h2:             24px;  --cg-lh-h2: 1.2;
  --cg-fs-body:           16px;  --cg-lh-body: 1.5;
  --cg-fs-small:          14px;  --cg-lh-small: 1;

  /* --- Promienie --- */
  --cg-r-pill:            100px; /* przyciski główne */
  --cg-r-round:           48px;  /* pigułki nawigacji, ikony */
  --cg-r-card:            16px;
  --cg-r-box:             12px;
  --cg-r-img:             8px;
  --cg-r-label:           6px;

  /* --- Odstępy / siatka --- */
  --cg-container:         1600px;  /* treść na 1920px z marginesem 160px */
  --cg-gutter:            160px;
  --cg-columns:           12;
  --cg-btn-h:             56px;
  --cg-nav-h:             100px;

  /* --- Cienie --- */
  --cg-shadow-card:       0 7px 6px rgba(0,0,0,.02),
                          0 22px 17px rgba(0,0,0,.02),
                          0 100px 80px rgba(0,0,0,.03);
  --cg-blur-nav:          blur(25px);
}

/* Przycisk główny (złoty gradient, pigułka) */
.cg-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--cg-btn-h); padding-inline: 24px;
  border: 0; border-radius: var(--cg-r-pill);
  background-image: var(--cg-gold-gradient);
  font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
  letter-spacing: var(--cg-tracking);
  color: var(--cg-text);   /* uwaga: tekst jest CIEMNY na złocie, nie biały */
  cursor: pointer;
}

/* Przycisk drugorzędny (obrys złoty, tło 10%) */
.cg-btn-secondary {
  display: inline-flex; align-items: center; gap: 12px;
  height: var(--cg-btn-h); padding: 0 4px 0 20px;
  border: 1px solid var(--cg-gold); border-radius: var(--cg-r-round);
  background: var(--cg-gold-10);
  font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
  letter-spacing: var(--cg-tracking);
  color: var(--cg-gold);
}

/* Pasek nawigacji — ciemna zieleń z radialnym gradientem */
.cg-nav {
  height: var(--cg-nav-h);
  padding: 24px var(--cg-gutter);
  background-image: var(--cg-green-gradient);
  color: var(--cg-white);
}
/* Pigułka menu: półprzezroczysta biel + rozmycie tła */
.cg-nav__pill {
  background: var(--cg-white-10);
  backdrop-filter: var(--cg-blur-nav);
  border-radius: var(--cg-r-round);
  padding: 4px;
}