/* =========================================================================
 * Tap N Roll Singles — Design Tokens
 * Single source of truth for color, type, spacing, motion, radii.
 * All other CSS files reference these variables; do not hardcode colors.
 * ========================================================================= */

:root {
	/* ---- Surfaces ---- */
	--tnr-bg:        #0F1115;
	--tnr-card:      #1A1E26;
	--tnr-card-2:    #222732;
	--tnr-line:      #2A2F3A;
	--tnr-line-2:    #363C49;

	/* ---- Text ---- */
	--tnr-text:      #EDEDED;
	--tnr-muted:     #9AA0AB;
	--tnr-faint:     #6A7080;

	/* ---- Accent (amber — primary brand) ---- */
	--tnr-amber:     #F5A623;
	--tnr-amber-2:   #E69510;
	--tnr-amber-ink: #1A1208;       /* text on amber backgrounds */

	/* ---- Semantic ---- */
	--tnr-green:     #3AAE6A;       /* in stock */
	--tnr-amber-warn:#F5A623;       /* low stock — reuses amber on purpose */
	--tnr-red:       #D7544D;       /* sold out */

	/* ---- MTG color identity pips (used inside .tnr-pip-*) ---- */
	--tnr-mtg-w: #F8E7B9;
	--tnr-mtg-u: #B3CEEA;
	--tnr-mtg-b: #2F2A2A;
	--tnr-mtg-r: #E9967A;
	--tnr-mtg-g: #9DC8A0;
	--tnr-mtg-c: #C2C4C7;

	/* ---- Typography ---- */
	--tnr-font-display: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif;
	--tnr-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tnr-font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--tnr-font-serif:   "Lora", Georgia, "Times New Roman", serif;

	--tnr-fs-eyebrow: 12px;
	--tnr-fs-body:    16px;
	--tnr-fs-h3:      20px;
	--tnr-fs-h2:      28px;
	--tnr-fs-h1:      40px;
	--tnr-fs-display: 64px;

	--tnr-ls-eyebrow: 0.18em;
	--tnr-ls-display: 0.02em;

	/* ---- Spacing scale (4px base) ---- */
	--tnr-s-1:  4px;
	--tnr-s-2:  8px;
	--tnr-s-3:  12px;
	--tnr-s-4:  16px;
	--tnr-s-5:  24px;
	--tnr-s-6:  32px;
	--tnr-s-7:  48px;
	--tnr-s-8:  64px;

	/* ---- Radii ---- */
	--tnr-r-1: 4px;
	--tnr-r-2: 8px;
	--tnr-r-3: 12px;
	--tnr-r-pill: 999px;

	/* ---- Motion ---- */
	--tnr-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
	--tnr-dur-fast:    140ms;
	--tnr-dur:         220ms;
	--tnr-dur-slow:    380ms;

	/* ---- Elevation ---- */
	--tnr-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
	--tnr-shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 48px rgba(0,0,0,0.45);

	/* ---- Layout ---- */
	--tnr-container:        1200px;
	--tnr-container-narrow: 880px;
	--tnr-grid-gap:         var(--tnr-s-5);
}

/* Hard reset of body chrome so Astra's default light frame doesn't bleed
   through on our shop pages.

   Match strategy — broad on purpose, so we apply on any plausible shop
   page even if our PHP detection ever misses one:
     - tapnroll-pdp / tapnroll-plp / tapnroll-cart  (set by our body_class filter)
     - body.shopwp                                  (added by ShopWP itself)
     - body.post-type-archive-wps_products          (the /products/ CPT archive)
     - body.post-type-archive-wps_collections       (the /collections/ archive)
     - body.single-wps_products                     (CPT single product)
     - body.single-wps_collections                  (CPT single collection)
     - any body with descendant .wp-shopify         (ShopWP's wrapper) via :has()
*/
body.tapnroll-pdp,
body.tapnroll-plp,
body.tapnroll-cart,
body.shopwp,
body.post-type-archive-wps_products,
body.post-type-archive-wps_collections,
body.single-wps_products,
body.single-wps_collections,
body.tapnroll-theme:has(.wp-shopify),
body.tapnroll-theme:has(.tnr-pdp),
body.tapnroll-theme:has(.tnr-plp),
body.tapnroll-theme:has(.tnr-cart) {
	background-color: var(--tnr-bg) !important;
	color: var(--tnr-text);
	font-family: var(--tnr-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Astra wraps content in #page / .site-content with its own background.
   Make those transparent on shop pages so our dark surface shows through. */
body.tapnroll-pdp #page,            body.tapnroll-plp #page,            body.tapnroll-cart #page,
body.shopwp #page,                  body.post-type-archive-wps_products #page,
body.post-type-archive-wps_collections #page,
body.single-wps_products #page,     body.single-wps_collections #page,
body.tapnroll-pdp .site-content,    body.tapnroll-plp .site-content,    body.tapnroll-cart .site-content,
body.shopwp .site-content,          body.post-type-archive-wps_products .site-content,
body.post-type-archive-wps_collections .site-content,
body.single-wps_products .site-content, body.single-wps_collections .site-content,
body.tapnroll-pdp .ast-container,   body.tapnroll-plp .ast-container,   body.tapnroll-cart .ast-container,
body.shopwp .ast-container,         body.post-type-archive-wps_products .ast-container,
body.post-type-archive-wps_collections .ast-container,
body.single-wps_products .ast-container, body.single-wps_collections .ast-container,
body.tapnroll-pdp .entry-content,   body.tapnroll-plp .entry-content,   body.tapnroll-cart .entry-content,
body.shopwp .entry-content,         body.post-type-archive-wps_products .entry-content,
body.post-type-archive-wps_collections .entry-content,
body.single-wps_products .entry-content, body.single-wps_collections .entry-content {
	background: transparent !important;
	color: var(--tnr-text);
}

/* Subtle grid texture seen on the mockups. Drawn with two repeating
   gradients so we don't need an image asset. */
body.tapnroll-pdp::before,
body.tapnroll-plp::before,
body.tapnroll-cart::before,
body.shopwp::before,
body.post-type-archive-wps_products::before,
body.post-type-archive-wps_collections::before,
body.single-wps_products::before,
body.single-wps_collections::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* Containers */
.tnr-container {
	position: relative;
	z-index: 1;
	max-width: var(--tnr-container);
	margin: 0 auto;
	padding: var(--tnr-s-6) var(--tnr-s-5);
}
.tnr-container--narrow {
	max-width: var(--tnr-container-narrow);
}

/* Eyebrow / mono label */
.tnr-eyebrow {
	font-family: var(--tnr-font-mono);
	font-size: var(--tnr-fs-eyebrow);
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
	color: var(--tnr-muted);
}
.tnr-eyebrow--muted { color: var(--tnr-faint); }

/* Buttons */
.tnr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tnr-s-2);
	padding: 14px 20px;
	border-radius: var(--tnr-r-2);
	border: 1px solid transparent;
	background: var(--tnr-amber);
	color: var(--tnr-amber-ink);
	font-family: var(--tnr-font-body);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform var(--tnr-dur-fast) var(--tnr-ease),
	            background var(--tnr-dur-fast) var(--tnr-ease);
	text-decoration: none;
}
.tnr-btn:hover { background: var(--tnr-amber-2); transform: translateY(-1px); }
.tnr-btn:disabled,
.tnr-btn[aria-disabled="true"] {
	background: var(--tnr-card-2);
	color: var(--tnr-faint);
	cursor: not-allowed;
	transform: none;
}

.tnr-btn--ghost {
	background: transparent;
	color: var(--tnr-text);
	border-color: var(--tnr-line-2);
}
.tnr-btn--ghost:hover {
	background: var(--tnr-card);
	border-color: var(--tnr-amber);
}

.tnr-btn--lg {
	padding: 18px 28px;
	font-size: 18px;
}

/* Inputs */
.tnr-input {
	background: var(--tnr-card);
	color: var(--tnr-text);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-2);
	padding: 10px 14px;
	font: 500 14px/1.2 var(--tnr-font-body);
	min-height: 40px;
	transition: border-color var(--tnr-dur-fast) var(--tnr-ease);
}
.tnr-input:focus {
	outline: none;
	border-color: var(--tnr-amber);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

/* Reduced motion: kill all transforms / transitions */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}