/**
 * UN Toolkit — global design tokens.
 *
 * Single source of truth, mirroring Elementor-and-Theme-Design-Settings.md
 * (values extracted live from the The7 / Elementor theme). Loaded before every
 * widget stylesheet: the shared `un-editor` handle depends on `un-tokens`, and
 * every Elementor widget depends on `un-editor`, so the `--un-*` tokens below
 * resolve plugin-wide. Directly-enqueued module styles (dashboards) also list
 * `un-tokens` as a dependency.
 *
 * Migration is phased — widgets are moved onto these tokens one batch at a time.
 * Defining tokens here is inert until a widget consumes them, so this file can
 * ship ahead of the migrations.
 */

:root {
	/* ---------- Brand (rose #916F73) ---------- */
	--un-rose:         #916F73; /* main accent / brand, link hover */
	--un-rose-link:    #916F738F; /* links (~56%) */
	--un-rose-divider: #916F735C; /* dividers (~36%) */
	--un-rose-bg:      #916F731C; /* soft accent background (~11%) */
	/* monochrome tier ramp (light → deep) — replaces the retired rose/gold
	   medallions; 4 steps + black reseller keep all tiers distinguishable */
	--un-rose-light:   #c9b3b5;
	--un-rose-mid:     #ad9194;
	--un-rose-deep:    #5e484b;

	/* ---------- Neutrals ---------- */
	--un-black:  #000000;   /* titles */
	--un-text:   #000000b3; /* body / text primary (70%) */
	--un-text-2: #00000073; /* text secondary (45%) */
	--un-text-3: #00000054; /* out-of-stock / tertiary (33%) */
	--un-white:    #ffffff;
	--un-bg:       #ffffff;
	--un-bg-soft:  #f5f5f5; /* content-box / placeholder fills (was #f9f9f9/#f0f0f0/#e8e8e8) */

	/* ---------- Borders / dividers ---------- */
	--un-border:        #e5e5e5; /* default light border (was #eee/#e5e7ea/#e8e8e8…) */
	--un-border-strong: #cccccc; /* stronger separators */
	--un-divider:       var(--un-rose-divider);

	/* ---------- Elevation / overlays ---------- */
	--un-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.08);
	--un-shadow-2: 0 2px 12px rgba(0, 0, 0, 0.12);
	--un-overlay:  rgba(0, 0, 0, 0.55); /* modal scrim */
	--un-veil:     rgba(0, 0, 0, 0.45); /* image hover veil */

	/* ---------- Radius (square brand) ---------- */
	--un-radius: 0;

	/* ---------- Font stacks (global; widgets fall back to these) ---------- */
	--un-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--un-font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--un-font-serif:   "Libre Baskerville", "Baskerville", "Hoefler Text", Georgia, serif;

	/* ---------- Type scale ---------- */
	--un-lh-tight: 1.3; /* headings / accent family */
	--un-lh-body:  1.6; /* paragraph family */
	--un-lh-btn:   1.2;

	--un-h1: 44px;
	--un-h2: 34px;
	--un-h3: 26px;
	--un-h4: 22px;
	--un-h5: 19px;
	--un-h6: 17px;

	/* paragraph + accent families share this px ramp */
	--un-fs-xl: 19px;
	--un-fs-l:  17px;
	--un-fs-m:  15px;
	--un-fs-s:  14px;
	--un-fs-xs: 13px;

	/* ---------- Status (brand-warm-tinted — PENDING VISUAL VALIDATION) ---------- */
	--un-success:    #4f7a4a;
	--un-success-bg: #eaf0e6;
	--un-warning:    #b07a3c;
	--un-warning-bg: #f6ecdd;
	--un-error:      #9e4b47;
	--un-error-bg:   #f4e4e2;
	--un-info:       #5e7480;
	--un-info-bg:    #e7edf0;
}

/* =====================================================================
   Buttons — canonical classes (per the Buttons section of the design doc).
   Square (radius 0), Public Sans, weight 400. A 1px transparent border is
   reserved on the base so hover states that add a visible border don't shift
   layout. Add a variant class + a size class: .un-btn .un-btn--flashy .un-btn--m
   ===================================================================== */

.un-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: var(--un-font-body);
	font-weight: 400;
	line-height: var(--un-lh-btn);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--un-radius);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary — solid dark (doc: #000000B3) */
.un-btn--primary {
	background: var(--un-text);
	color: var(--un-white);
}
.un-btn--primary:hover {
	background: var(--un-white);
	color: var(--un-text);
	border-color: var(--un-text);
}

/* Secondary — outline black */
.un-btn--secondary {
	background: var(--un-white);
	color: var(--un-black);
	border-color: var(--un-black);
}
.un-btn--secondary:hover {
	background: var(--un-black);
	color: var(--un-white);
}

/* Flashy — rose CTA (checkout, "must be seen") */
.un-btn--flashy {
	background: var(--un-rose);
	color: var(--un-white);
}
.un-btn--flashy:hover {
	background: var(--un-white);
	color: var(--un-rose);
	border-color: var(--un-rose);
}

/* Ghost — for dark/image backgrounds */
.un-btn--ghost {
	background: transparent;
	color: var(--un-white);
	border-color: var(--un-white);
}
.un-btn--ghost:hover {
	background: var(--un-white);
	color: var(--un-black);
}

/* Sizes */
.un-btn--xl { font-size: 20px; padding: 16px 22px; min-height: 58px; }
.un-btn--l  { font-size: 18px; padding: 14px 20px; min-height: 54px; }
.un-btn--m  { font-size: 16px; padding: 12px 18px; min-height: 48px; }
.un-btn--s  { font-size: 14px; padding: 8px 16px;  min-height: 38px; }
.un-btn--xs { font-size: 12px; padding: 6px 12px;  min-height: 32px; }

/* =====================================================================
   Type helpers — for plugin-rendered markup that is NOT a native heading
   (so it can't pick up The7's global H1–H6 / body rules). Use sparingly;
   native <h*> and theme body text already inherit the right styles.
   ===================================================================== */

.un-h1, .un-h2, .un-h3, .un-h4, .un-h5, .un-h6 {
	margin: 0;
	font-family: var(--un-font-display);
	color: var(--un-black);
	line-height: var(--un-lh-tight);
}
.un-h1 { font-size: var(--un-h1); font-weight: 300; }
.un-h2 { font-size: var(--un-h2); font-weight: 400; }
.un-h3 { font-size: var(--un-h3); font-weight: 400; }
.un-h4 { font-size: var(--un-h4); font-weight: 400; }
.un-h5 { font-size: var(--un-h5); font-weight: 400; }
.un-h6 { font-size: var(--un-h6); font-weight: 400; }

.un-p-xl, .un-p-l, .un-p-m, .un-p-s, .un-p-xs {
	font-family: var(--un-font-body);
	font-weight: 400;
	line-height: var(--un-lh-body);
	color: var(--un-text);
}
.un-p-xl { font-size: var(--un-fs-xl); }
.un-p-l  { font-size: var(--un-fs-l); }
.un-p-m  { font-size: var(--un-fs-m); }
.un-p-s  { font-size: var(--un-fs-s); }
.un-p-xs { font-size: var(--un-fs-xs); }

.un-accent-xl, .un-accent-l, .un-accent-m, .un-accent-s, .un-accent-xs {
	font-family: var(--un-font-display);
	font-weight: 400;
	line-height: var(--un-lh-tight);
	color: var(--un-text);
}
.un-accent-xl { font-size: var(--un-fs-xl); }
.un-accent-l  { font-size: var(--un-fs-l); }
.un-accent-m  { font-size: var(--un-fs-m); }
.un-accent-s  { font-size: var(--un-fs-s); }
.un-accent-xs { font-size: var(--un-fs-xs); }

/* =====================================================================
   The7 compat — keep position:sticky working inside the page wrapper.
   The7 sets overflow:hidden on #page (and on .closed-mobile-header in
   some header modes). overflow != visible turns those into scroll
   containers, which kills every sticky descendant — e.g. the cart's
   pinned totals column and ChromaLab's category sidebar. overflow:clip
   contains the same horizontal overflow without establishing a scroll
   container, so sticky keeps working. Loaded site-wide via un-tokens.
   ===================================================================== */

#page,
.closed-mobile-header {
	overflow: clip !important;
}