/* ====================================================================
 *  WARM PREMIUM — design tokens, denotenshop-inspired.
 *
 *  Warm cream background, orange CTA energy, dusty purple accent picking
 *  up the wasparfumonline brand logo, friendly soft radii, micro-shadows.
 *  Editorial premium with Dutch retail warmth.
 *
 *  All legacy variable names (--c-ink, --c-cream, --c-fg, etc.) are kept
 *  as ALIASES so existing PHP class refs continue to work — only the
 *  values change.
 * ==================================================================== */
:root {

	/* ---------- Warm cream / charcoal core ---------- */
	--c-bg:           #FFFAF3;   /* warm cream — page background */
	--c-bg-2:         #FFFFFF;   /* pure white — cards, panels */
	--c-bg-3:         #F6EFE3;   /* deeper cream — alt sections */
	--c-fg:           #1F1A14;   /* warm dark charcoal (NOT pure black) */
	--c-fg-2:         #2C271F;
	--c-fg-soft:      #4B4439;   /* secondary body text */
	--c-muted-fg:     #8A8175;   /* tertiary / metadata grey */
	--c-muted:        #8A8175;   /* legacy alias */
	--c-muted-2:      #B6AEA0;
	--c-border:       #E8DFCE;   /* warm hairline */
	--c-border-2:     #D4C9B2;
	--c-border-light: #F0E8D6;

	/* ---------- Brand accents ---------- */
	--c-primary:        #E07B26;   /* warm orange — primary CTA */
	--c-primary-hover:  #C8651B;   /* darker orange on hover */
	--c-primary-soft:   #FCEEDD;   /* light tint for backgrounds / badges */
	--c-primary-line:   #F2C796;

	--c-accent:        #6B5BB3;    /* dusty purple — picks up brand logo */
	--c-accent-hover:  #574699;
	--c-accent-soft:   #ECE7F7;

	--c-sale:          #D9344A;    /* bright red-orange for sale stickers */
	--c-sale-soft:     #FFE5E8;
	--c-trust:         #2A8F5F;    /* green for in-stock / trust marks */
	--c-trust-soft:    #E2F2EA;
	--c-warn:          #E5A82F;
	--c-yellow:        #F4C033;    /* review stars, certification */

	/* ---------- Inverted palette (dark sections) ---------- */
	--c-inv-bg:       #1F1A14;     /* warm charcoal */
	--c-inv-fg:       #FFFAF3;     /* warm cream on dark */

	/* ---------- Backwards-compat aliases ---------- */
	--c-ink:        var(--c-fg);
	--c-ink-2:      var(--c-fg-2);
	--c-ink-3:      var(--c-fg-soft);
	--c-gold:       var(--c-primary);     /* gold = primary orange now */
	--c-gold-2:     var(--c-primary-hover);
	--c-gold-soft:  var(--c-primary-soft);
	--c-cream:      var(--c-bg);
	--c-cream-2:    var(--c-bg-3);
	--c-cream-3:    var(--c-bg-3);
	--c-line:       var(--c-border);
	--c-line-2:     var(--c-border-2);
	--c-line-dark:  rgba(255,255,255,0.16);
	--c-text:       var(--c-fg);
	--c-success:    var(--c-trust);
	--c-danger:     var(--c-sale);
	--c-white:      var(--c-bg-2);

	/* ---------- Typography ---------- */
	--ff-display:   'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ff-text:      'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ff-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

	--fs-xxs:  0.75rem;
	--fs-xs:   0.8125rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.0625rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.5rem;
	--fs-2xl:  1.875rem;
	--fs-3xl:  2.375rem;
	--fs-4xl:  3rem;
	--fs-5xl:  3.75rem;
	--fs-6xl:  4.5rem;
	--fs-7xl:  6rem;
	--fs-8xl:  8rem;

	--lh-tight:    1.05;
	--lh-snug:     1.2;
	--lh-base:     1.55;
	--lh-relaxed:  1.7;

	--ls-tighter:  -0.04em;
	--ls-tight:    -0.02em;
	--ls-snug:     -0.01em;
	--ls-normal:    0;
	--ls-wide:      0.04em;
	--ls-wider:     0.1em;

	/* ---------- Spacing ---------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-7: 2rem;
	--sp-8: 2.5rem;
	--sp-9: 3rem;
	--sp-10: 4rem;
	--sp-11: 5rem;
	--sp-12: 6rem;
	--sp-13: 8rem;
	--sp-14: 10rem;

	/* ---------- Container ---------- */
	--container:    1280px;
	--container-sm: 960px;
	--container-xs: 720px;

	/* ---------- Soft radii — friendly retail feel ---------- */
	--r-xs:   4px;
	--r-sm:   6px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-xl:   24px;
	--r-2xl:  32px;
	--r-pill: 999px;

	/* ---------- Subtle warm shadows ---------- */
	--sh-1: 0 1px 2px rgba(31,26,20,.04), 0 2px 6px rgba(31,26,20,.05);
	--sh-2: 0 4px 12px rgba(31,26,20,.06), 0 2px 4px rgba(31,26,20,.04);
	--sh-3: 0 12px 28px rgba(31,26,20,.10), 0 4px 10px rgba(31,26,20,.06);
	--sh-4: 0 24px 56px rgba(31,26,20,.16), 0 8px 18px rgba(31,26,20,.08);
	--sh-primary: 0 8px 22px rgba(224,123,38,.30);
	--sh-accent:  0 8px 22px rgba(107,91,179,.28);
	--sh-gold:    var(--sh-primary);

	/* ---------- Borders ---------- */
	--bw-hair:   1px;
	--bw-thin:   1px;
	--bw-medium: 2px;
	--bw-thick:  3px;

	--b-hair:   var(--bw-hair)   solid var(--c-border-light);
	--b-thin:   var(--bw-thin)   solid var(--c-border);
	--b-medium: var(--bw-medium) solid var(--c-border-2);
	--b-thick:  var(--bw-thick)  solid var(--c-fg);

	/* ---------- Motion — smooth Apple-style ---------- */
	--ease:        cubic-bezier(.22, .61, .36, 1);
	--ease-out:    cubic-bezier(.16, 1, .3, 1);
	--ease-in:     cubic-bezier(.7, 0, .84, 0);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--dur-fast:    140ms;
	--dur:         220ms;
	--dur-slow:    420ms;
	--dur-slower:  720ms;

	/* ---------- Layout ---------- */
	--header-h:  88px;
	--topbar-h:  36px;
	--z-topbar:  40;
	--z-header:  50;
	--z-overlay: 80;
	--z-modal:   90;
	--z-toast:  100;
}

@media (max-width: 900px) {
	:root {
		--header-h: 64px;
		--fs-7xl: 4rem;
		--fs-8xl: 4.5rem;
	}
}