/* ============================================================
   PARENDI — Design Tokens
   Warm Boutique palette (z logo: rose + cool gray)
   Cormorant Garamond + Outfit + Allura (decorative script)
   ============================================================ */

:root {
	/* ─── Kolory: tła ─────────────────────────────────────── */
	--c-bg:            #FFFFFF;  /* białe — primary bg (tymczasowo, docelowo warm off-white #F8F5F0) */
	--c-bg-alt:        #FAFAFA;  /* bardzo jasne szare — alternating sections */
	--c-bg-rose:       #F5ECD8;  /* powder pink z logo — premium sections */
	--c-bg-dark:       #1A1714;  /* off-black — dark sections */
	--c-surface:       #FFFFFF;  /* pure white — cards */

	/* ─── Kolory: typografia ──────────────────────────────── */
	--c-text:          #1A1714;  /* off-black — body i headings */
	--c-text-muted:    #6B5F53;  /* warm gray — secondary */
	--c-text-light:    #BCBEC0;  /* z logo cool gray — labels, captions */
	--c-text-on-dark:  #F8F5F0;  /* warm white na dark bg */

	/* ─── Kolory: linie ───────────────────────────────────── */
	--c-line:          #1A1714;  /* czarne hairline 1px premium */
	--c-line-soft:     #E4E5E6;  /* separatory subtelne */
	--c-line-dark:     #6B5F53;  /* na dark bg */

	/* ─── Akcent: róż z logo (max 3-5% powierzchni) ──────── */
	--c-accent:        #C9A96E;  /* z logo — CTA, underlines, hover */
	--c-accent-hover:  #A07830;  /* hover state ciemniejszy */
	--c-accent-soft:   #F5ECD8;  /* tints */

	/* ─── Gradient przycisków (globalny) ────────────────── */
	--c-btn-gradient:  linear-gradient(120deg, #7A5C1E 0%, #C9A96E 100%);

	/* ─── Akcent: szampan gold (medycyna estetyczna) ─────── */
	--c-gold:          #C8A876;

	/* ─── Typografia: fonty ──────────────────────────────── */
	--font-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans:       'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-script:     'Allura', 'Brush Script MT', cursive;

	/* ─── Typografia: rozmiary (fluid clamp) ─────────────── */
	--fs-display-xl:   clamp(72px, 11vw, 168px);   /* hero italic */
	--fs-display-lg:   clamp(56px, 8vw, 120px);    /* H1 sekcji */
	--fs-display-md:   clamp(40px, 5vw, 80px);     /* H2 */
	--fs-display-sm:   clamp(28px, 3vw, 48px);     /* H3 */
	--fs-script:       clamp(180px, 28vw, 380px);  /* dekoracyjny script */
	--fs-h4:           clamp(20px, 2vw, 28px);
	--fs-body-lg:      17px;
	--fs-body:         16px;
	--fs-body-sm:      14px;
	--fs-label:        11px;
	--fs-micro:        10px;

	/* ─── Typografia: line-height ────────────────────────── */
	--lh-display:      0.95;
	--lh-heading:      1.1;
	--lh-body:         1.65;
	--lh-tight:        1.3;

	/* ─── Typografia: letter-spacing ─────────────────────── */
	--ls-label:        0.2em;     /* UPPERCASE labels */
	--ls-label-tight:  0.08em;    /* CTA buttons */
	--ls-label-wide:   0.4em;     /* eyebrows */

	/* ─── Spacing scale (8px base) ────────────────────────── */
	--sp-1:            4px;
	--sp-2:            8px;
	--sp-3:            12px;
	--sp-4:            16px;
	--sp-5:            24px;
	--sp-6:            32px;
	--sp-7:            48px;
	--sp-8:            64px;
	--sp-9:            96px;
	--sp-10:           128px;
	--sp-11:           160px;
	--sp-12:           200px;

	/* ─── Container ──────────────────────────────────────── */
	--container-max:   1440px;
	--container-pad:   clamp(24px, 5vw, 96px);
	--section-pad-y:   clamp(80px, 12vw, 200px);

	/* ─── Border radius (minimal premium) ────────────────── */
	--radius-sm:       2px;
	--radius-md:       4px;
	--radius-lg:       8px;
	--radius-full:     999px;

	/* ─── Shadows (subtle, dla floating elements) ────────── */
	--shadow-sm:       0 4px 12px rgba(26, 23, 20, 0.04);
	--shadow-md:       0 16px 40px rgba(26, 23, 20, 0.08);
	--shadow-lg:       0 32px 80px rgba(26, 23, 20, 0.12);

	/* ─── Transitions ────────────────────────────────────── */
	--ease:            cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:        180ms;
	--dur-med:         320ms;
	--dur-slow:        600ms;

	/* ─── Z-index scale ──────────────────────────────────── */
	--z-base:          1;
	--z-content:       10;
	--z-floating:      50;
	--z-nav:           100;
	--z-modal:         500;
	--z-toast:         1000;
}