/**
 * Design tokens — Deepak Sales.
 *
 * The single source of truth for the visual system. Tune values here to
 * re-skin the whole theme. Heritage-luxury: ivory paper, royal oxblood,
 * brass/gold accent, warm ink, with a monospace "ledger" data face.
 */

:root {
	/* ---- Brand palette ---------------------------------------------------- */
	--ds-oxblood:        #6b1220; /* primary — royal oxblood            */
	--ds-oxblood-deep:   #4a0c17; /* darker primary for gradients/hover */
	--ds-oxblood-tint:   #f4e6e6; /* faint primary wash                 */
	--ds-gold:           #b98a3c; /* brass accent                       */
	--ds-gold-soft:      #e3c680; /* light gold for highlights          */
	--ds-gold-tint:      #f7efdd; /* faint gold wash                    */

	/* ---- Neutrals (warm) -------------------------------------------------- */
	--ds-ink:            #1a1614; /* headings / near-black text         */
	--ds-body:           #3d3733; /* body copy                          */
	--ds-muted:          #6f665f; /* secondary text                     */
	--ds-paper:          #fbf8f2; /* page background — ivory            */
	--ds-paper-2:        #f4efe4; /* alternating section background      */
	--ds-surface:        #ffffff; /* cards / raised surfaces            */
	--ds-line:           rgba(26, 22, 20, 0.12); /* hairline borders    */
	--ds-line-strong:    rgba(26, 22, 20, 0.22);

	/* ---- Semantic --------------------------------------------------------- */
	--ds-bg:             var(--ds-paper);
	--ds-fg:             var(--ds-body);
	--ds-heading:        var(--ds-ink);
	--ds-accent:         var(--ds-oxblood);
	--ds-accent-2:       var(--ds-gold);
	--ds-on-accent:      #fdf6ec; /* text on oxblood                    */
	--ds-success:        #2f6b46;
	--ds-focus:          var(--ds-gold);
	--ds-status-open:        #22c55e; /* store-locator "open now" status dot */
	--ds-status-open-ring:   rgba(34, 197, 94, 0.18);
	--ds-status-closed:      #ef4444; /* store-locator "closed" status dot */
	--ds-status-closed-ring: rgba(239, 68, 68, 0.18);

	/* ---- Typography ------------------------------------------------------- */
	--ds-font-display:   "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--ds-font-body:      "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ds-font-mono:      "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Fluid type scale (mobile-first; clamps up to desktop). Strictly
	   descending hierarchy at every viewport width:
	   Display (Hero) > H1 (Page title) > H2 (Section) > H3 (Subsection)
	   > Card title. Hero used to share --ds-fs-h1 with page/category/
	   single-product titles, which is why those pages read hero-scale —
	   they now stay on the (smaller) --ds-fs-h1 automatically since they
	   already reference it by name, while Hero moves to its own token. */
	--ds-fs-eyebrow:     clamp(0.68rem, 0.62rem + 0.3vw, 0.75rem);
	--ds-fs-small:       clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* Small Labels: 13-14px */
	--ds-fs-body:        clamp(0.975rem, 0.95rem + 0.1vw, 1rem);       /* Body Text: ~16px */
	--ds-fs-lead:        clamp(1.05rem, 1rem + 0.3vw, 1.25rem);        /* Lead Paragraphs: ~17-20px */
	--ds-fs-card-title:  clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);   /* Product/Category Card Titles: 18-20px */
	--ds-fs-h3:          clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);    /* Subsection Headings: 22-26px */
	--ds-fs-h2:          clamp(1.625rem, 1.5rem + 0.7vw, 2rem);        /* Section Headings: 26-32px */
	--ds-fs-h1:          clamp(1.75rem, 1.55rem + 1.1vw, 2.25rem);     /* Page/Category/Single-Product Titles: 28-36px */
	--ds-fs-display:     clamp(2.75rem, 2.35rem + 1.6vw, 3.5rem);      /* Hero Title only: 44-56px — largest text on the site */

	/* Purpose-specific type sizes (kept distinct from --ds-fs-small so
	   Buttons/Navigation can move independently of Small Labels). */
	--ds-fs-nav:         clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);      /* Navigation: 15-16px */
	--ds-fs-button:      clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);      /* Buttons: 15-16px */
	--ds-fs-price-sm:    clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);     /* Price inside Product/Category Cards: 20-24px — slightly more prominent than the 18-20px card title */
	--ds-fs-price:       clamp(2rem, 1.85rem + 0.6vw, 2.25rem);        /* Single Product Price: 32-36px */

	/* Font weights (reduces the ad-hoc 700/500 mix used across sections) */
	--ds-fw-heading:     700; /* Main headings: hero / page titles        */
	--ds-fw-section:     600; /* Section headings                        */
	--ds-fw-product:     600; /* Product titles (card + single product)  */
	--ds-fw-nav:         500; /* Navigation                              */
	--ds-fw-body:        400; /* Body text                               */
	--ds-fw-label:       500; /* Small labels / eyebrows                 */

	--ds-lh-tight:       1.05;
	--ds-lh-snug:        1.25;
	--ds-lh-body:        1.65;

	--ds-ls-wide:        0.14em; /* eyebrows / labels */
	--ds-ls-wider:       0.24em; /* utility caps      */

	/* ---- Spacing scale ---------------------------------------------------- */
	--ds-space-2xs:      0.25rem;
	--ds-space-xs:       0.5rem;
	--ds-space-sm:       0.75rem;
	--ds-space-md:       1rem;
	--ds-space-lg:       1.5rem;
	--ds-space-xl:       2.5rem;
	--ds-space-2xl:      4rem;
	--ds-space-3xl:      6rem;

	/* Section rhythm (fluid). Base value below is the mobile tier; the
	   breakpoint tiers underneath the :root block each redefine this same
	   custom property with their own clamp() so every one of the 14+
	   sections that reads --ds-section-y for top/bottom padding scales
	   proportionally at each step instead of one continuous vw formula
	   guessing its way up to a very large desktop maximum. */
	--ds-section-y:      clamp(2rem, 1.75rem + 1.5vw, 2.5rem);

	/* ---- Layout ----------------------------------------------------------- */
	--ds-shell-max:      1240px;
	--ds-shell-pad:      clamp(1rem, 0.5rem + 3vw, 2.5rem);

	/* ---- Radii ------------------------------------------------------------ */
	--ds-radius-sm:      6px;
	--ds-radius-md:      12px;
	--ds-radius-lg:      20px;
	--ds-radius-pill:    999px;

	/* ---- Elevation -------------------------------------------------------- */
	--ds-shadow-sm:      0 1px 2px rgba(26, 22, 20, 0.06), 0 1px 3px rgba(26, 22, 20, 0.05);
	--ds-shadow-md:      0 6px 20px rgba(26, 22, 20, 0.08);
	--ds-shadow-lg:      0 20px 50px rgba(74, 12, 23, 0.14);
	--ds-shadow-brand:   0 24px 60px rgba(107, 18, 32, 0.12); /* repeated hover-lift shadow across brands/categories/featured-collections/explore-collection cards */
	--ds-border-brand:       rgba(185, 138, 60, 0.12); /* repeated gold-tint card border (default) */
	--ds-border-brand-hover: rgba(185, 138, 60, 0.35); /* repeated gold-tint card border (hover) */
	--ds-scrim:          rgba(26, 22, 20, 0.55); /* repeated overlay scrim behind the mobile drawer / search overlay */

	/* ---- Motion ----------------------------------------------------------- */
	--ds-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
	--ds-dur-fast:       160ms;
	--ds-dur:            280ms;
	--ds-dur-slow:       520ms;

	/* ---- Z-index scale ---------------------------------------------------- */
	--ds-z-header:       100;
	--ds-z-sticky-bar:   105; /* mobile PDP contact bar — above header/quick-actions, below search/drawer so those still cover it when open */
	--ds-z-search:       110;
	--ds-z-drawer:       200;
	--ds-z-toast:        300;

	/* ---- Header measurements (used for sticky offsets) -------------------- */
	--ds-announce-h:     2.25rem;
	--ds-header-h:       4rem; /* ~64px — compact premium target (was 4.75rem/76px); mobile overrides tighter still in header.css */
}

/* Section rhythm — proportional step scale. Each tier redefines the same
   --ds-section-y custom property with its own fluid clamp(), so every
   section that reads it inherits the step automatically; nothing here is
   a fixed/flat value. 992px and 1400px are formalized as real tiers (they
   didn't exist as breakpoints anywhere in the codebase before), closing
   the gap where 900-1023px viewports used to inherit the 1024px+ desktop
   styles from other components while getting none of this section's
   tightening. Max resolves to 5rem/80px at the widest tier (was 7rem/112px). */
@media (min-width: 48em) { /* 768px */
	:root {
		--ds-section-y: clamp(2.5rem, 1.8rem + 2.25vw, 3.25rem); /* ~40-52px */
	}
}

@media (min-width: 62em) { /* 992px — new tier */
	:root {
		--ds-section-y: clamp(3rem, 2rem + 2.25vw, 3.75rem); /* ~48-60px */
	}
}

@media (min-width: 75em) { /* 1200px */
	:root {
		--ds-section-y: clamp(3.5rem, 2.5rem + 2.25vw, 4.5rem); /* ~56-72px */
	}
}

@media (min-width: 87.5em) { /* 1400px — new tier */
	:root {
		--ds-section-y: clamp(4rem, 3rem + 2vw, 5rem); /* ~64-80px */
	}
}