/**
 * The Wicked — shared design tokens & utilities.
 * Mirrors the #root custom properties from the design reference (index.html).
 * Tokens are scoped to .tw-scope so widgets are self-contained even if the
 * theme owns :root; every widget wrapper carries the .tw-scope class.
 */

.tw-scope {
	--tw-ink: #f6f4f0;      /* primary heading / brightest text */
	--tw-cream: #e9e6df;    /* secondary heading text */
	--tw-body: #c4c1ba;     /* body copy */
	--tw-muted: #9d9a92;    /* muted / meta text */
	--tw-muted2: #86837c;   /* dimmer meta text */
	--tw-tan: #B18051;      /* bronze brand accent */
	--tw-tan-hi: #c9a074;   /* bronze highlight / hover */
	--tw-line: rgba(255, 255, 255, .09);  /* hairline borders */
	--tw-line2: rgba(255, 255, 255, .14); /* stronger hairline */
	--tw-bg: #08080a;       /* page background */
	--tw-panel-bg: #0d0d10; /* panel/card background */
	--tw-maxw: 1400px;      /* content max width */
	--tw-pad: clamp(24px, 5vw, 96px); /* horizontal padding */

	--tw-font-display: 'Cormorant Garamond', serif;
	--tw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------------
   Button reset (theme-neutraliser).
   Hello Elementor's reset.css paints EVERY <button> a pink (#c36) fill on
   :hover / :focus. Our widget buttons are all ghost-style, so cancel that fill
   inside our scope. Specificity here (0,1,2) out-ranks the theme's `button:hover`
   (0,1,1); each widget's own border/text-colour controls sit higher still and are
   untouched. A widget that ever needs a *filled* button on hover should override
   with a `.tw-scope`-prefixed selector so it beats this reset.
   --------------------------------------------------------------------------- */
.tw-scope button:hover,
.tw-scope button:focus,
.tw-scope button:focus-visible,
.tw-scope button:active {
	background: none;
}