/* =========================================================================
   CLUTCHES — Design Tokens
   כל מיתוג האתר מתרכז כאן. שינוי קובץ זה בלבד = מיתוג מחדש מלא.
   ========================================================================= */

:root {
	/* ---- Brand palette (monochrome fashion look) ---- */
	--c-black:        #111111;
	--c-ink:          #1a1a1a;   /* primary text */
	--c-white:        #ffffff;
	--c-bg:           #ffffff;   /* page background */
	--c-bg-soft:      #f6f5f3;   /* soft section bg */
	--c-bg-muted:     #efeeeb;
	--c-line:         #e4e2de;   /* thin dividers */
	--c-line-strong:  #cfccc6;
	--c-muted:        #8a8781;   /* secondary text */
	--c-muted-2:      #b3afa8;

	/* ---- Accent / states ---- */
	--c-sale:         #c1121f;   /* SALE red */
	--c-sale-bg:      #fbe9ea;
	--c-hl:           #f6e409;   /* promo highlight yellow */
	--c-on-hl:        #111111;
	--c-success:      #2e7d32;
	--c-focus:        #0b5fff;   /* keyboard focus ring */

	/* ---- Semantic ---- */
	--c-accent:       var(--c-black);
	--c-on-accent:    var(--c-white);
	--c-link:         var(--c-ink);
	--c-badge-bg:     var(--c-black);
	--c-badge-text:   var(--c-white);

	/* ---- Typography ---- */
	--font-ui:        "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
	--font-serif:     "Cormorant Garamond", "Times New Roman", serif;

	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;

	--fs-xxs:  0.6875rem;  /* 11px — labels/badges */
	--fs-xs:   0.75rem;    /* 12px */
	--fs-sm:   0.8125rem;  /* 13px */
	--fs-base: 0.9375rem;  /* 15px */
	--fs-md:   1.0625rem;  /* 17px */
	--fs-lg:   1.375rem;   /* 22px */
	--fs-xl:   1.875rem;   /* 30px */
	--fs-2xl:  2.75rem;    /* 44px */
	--fs-hero: clamp(2rem, 5vw, 4rem);

	--lh-tight: 1.1;
	--lh-snug:  1.3;
	--lh-base:  1.6;

	--ls-wide:  0.08em;    /* uppercase Latin labels */
	--ls-wider: 0.16em;

	/* ---- Layout ---- */
	--container:      1440px;
	--container-wide: 1680px;
	--container-home: 1200px;    /* centered homepage column */
	--gutter:         clamp(16px, 4vw, 48px);
	--header-h:       76px;
	--header-h-shrink:60px;
	--promo-h:        48px;
	--radius-sm:      2px;
	--radius:         4px;
	--radius-lg:      10px;
	--radius-pill:    999px;

	/* ---- Spacing scale ---- */
	--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;

	/* ---- Effects ---- */
	--shadow-sm:  0 1px 3px rgba(0,0,0,.06);
	--shadow:     0 6px 24px rgba(0,0,0,.08);
	--shadow-lg:  0 12px 48px rgba(0,0,0,.14);
	--ease:       cubic-bezier(.4,0,.2,1);
	--dur:        .28s;
	--dur-fast:   .16s;

	/* ---- Z-index scale ---- */
	--z-header:  1000;
	--z-mega:    1010;
	--z-drawer:  1200;
	--z-overlay: 1190;
	--z-float:   900;
	--z-toast:   1300;
	--z-a11y:    1400;
}

/* ---- Mobile: keep desktop typography scale; only trim chrome heights ---- */
@media (max-width: 640px) {
	:root {
		--header-h:        64px;
		--header-h-shrink: 56px;
		--promo-h:         40px;
		--gutter:          clamp(16px, 4vw, 24px);
	}
}

/* Prepared for future LTR toggle: overrides go under html[dir="ltr"] if needed. */
html[dir="ltr"] { /* reserved for LTR-specific token overrides */ }

/* Respect reduced-motion by default (a11y widget can also force this). */
@media (prefers-reduced-motion: reduce) {
	:root { --dur: .001s; --dur-fast: .001s; }
}