/* =========================================================================
   PEPTAGEN LAB — Design Tokens
   Jedno źródło prawdy dla kolorów, typografii, odstępów, promieni i cieni.
   Paleta: czerń / biel / ciepły beż (#D2B791) + złoty akcent (#D4A017).
   Styl: minimalistyczny, profesjonalny; banery zaokrąglone w kontenerze.
   ========================================================================= */

:root {
	/* --- Marka / kolory bazowe ------------------------------------------ */
	--pep-black-900: #16130F;  /* ciepła czerń — hero, stopka, banery */
	--pep-black-800: #221E18;  /* czerń pośrednia */
	--pep-black-700: #332D24;  /* hover elementów czarnych */
	--pep-ink:       #1B1712;  /* tekst główny */

	--pep-beige-500: #D2B791;  /* ciepły beż marki */
	--pep-beige-300: #E3D3B8;
	--pep-beige-100: #F2EADC;  /* tinty, tła odznak i ikon */
	--pep-beige-050: #F9F5EE;  /* jasne tło sekcji */

	--pep-gold-500:  #D4A017;  /* złoty akcent — oszczędnie */
	--pep-gold-700:  #8F6E1C;  /* złoty na jasnym tle (czytelny) */

	/* Neutralne — ciepłe (kamień), nie zimna szarość */
	--pep-stone-600: #5C5546;  /* tekst drugorzędny */
	--pep-stone-400: #8C8474;  /* tekst wyciszony */
	--pep-stone-200: #CFC7B8;
	--pep-line:      #ECE6DA;  /* hairline / linie */
	--pep-line-2:    #DFD7C7;  /* linia mocniejsza */
	--pep-paper:     #FFFFFF;

	/* Stany / semantyka */
	--pep-success:  #2E7D4F;
	--pep-danger:   #C24A44;
	--pep-warning:  #B07B0E;

	/* --- Role kolorów (używaj tych w komponentach) ---------------------- */
	--color-bg:            var(--pep-paper);
	--color-bg-alt:        var(--pep-beige-050);
	--color-bg-invert:     var(--pep-black-900);
	--color-text:          var(--pep-ink);
	--color-text-soft:     var(--pep-stone-600);
	--color-text-muted:    var(--pep-stone-400);
	--color-text-invert:   var(--pep-paper);
	--color-primary:       var(--pep-ink);        /* przyciski / akcje: czerń */
	--color-primary-hover: var(--pep-black-700);
	--color-accent:        var(--pep-beige-500);  /* ciepły beż */
	--color-accent-strong: var(--pep-gold-500);   /* złoto — detale */
	--color-line:          var(--pep-line);
	--color-line-strong:   var(--pep-line-2);

	/* --- Typografia ----------------------------------------------------- */
	--font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-300: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
	--fs-400: clamp(0.94rem, 0.92rem + 0.12vw, 1rem);   /* body */
	--fs-500: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	--fs-600: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	--fs-700: clamp(1.6rem, 1.3rem + 1.2vw, 2.35rem);
	--fs-800: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);    /* hero h1 */

	--lh-tight: 1.12;
	--lh-snug: 1.35;
	--lh-normal: 1.65;

	--tracking-tight: -0.02em;
	--tracking-wide: 0.02em;
	--tracking-wider: 0.12em;

	/* --- Wagi ----------------------------------------------------------- */
	--fw-body: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Odstępy (skala 4px) -------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4.5rem;
	--space-12: 7rem;

	/* --- Kształt / promienie (miękkie, nowoczesne) ---------------------- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 28px;   /* zaokrąglone banery */
	--radius-pill: 999px;

	/* --- Cienie (subtelne, warstwowe) ------------------------------------ */
	--shadow-xs: 0 1px 2px rgba(27, 23, 18, 0.05);
	--shadow-sm: 0 2px 10px rgba(27, 23, 18, 0.06);
	--shadow-md: 0 10px 30px -12px rgba(27, 23, 18, 0.16);
	--shadow-lg: 0 24px 60px -24px rgba(27, 23, 18, 0.24);
	--shadow-focus: 0 0 0 4px rgba(212, 160, 23, 0.22);

	/* --- Layout (treść w kontenerze, nie full-width) --------------------- */
	--container: 1200px;
	--container-narrow: 760px;
	--header-h: 72px;

	/* --- Przejścia ------------------------------------------------------ */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur: 180ms;
}