/* Atolyeman base layer — consumes tokens.css. Kept intentionally light for
   Phase 1: Blocksy owns structural layout; this establishes brand identity and
   the shared building blocks we expand into a full design system in Phase 2. */

body {
	background: var(--at-bg);
	color: var(--at-text);
	font-family: var(--at-font-sans);
	font-size: var(--at-fs-300);
	line-height: var(--at-lh-body);
}

h1, h2, h3, .at-display {
	font-family: var(--at-font-display);
	line-height: var(--at-lh-tight);
	letter-spacing: -0.015em;
	color: var(--at-text);
}

/* ---- Button system ---------------------------------------------------------
   Exactly two styles. Primary: accent fill, subtle lift on hover. Ghost:
   outline that fills on hover. Every CTA (theme + WooCommerce loop/single/
   checkout) resolves to one of these; colors come from tokens so buttons
   morph per segment. */
.at-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--at-space-2);
	background: var(--at-accent);
	color: var(--at-on-accent);
	border: 1px solid transparent;
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-3) var(--at-space-6);
	font-weight: 600;
	font-size: var(--at-fs-200);
	letter-spacing: .015em;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.at-btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--at-accent-hover);
	color: var(--at-on-accent);
	transform: translateY(-1px);
	box-shadow: var(--at-shadow);
}

.at-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
	box-shadow: none;
}

.at-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 2px solid var(--at-accent);
	outline-offset: 2px;
}

/* Ghost / secondary */
.at-btn--ghost {
	background: transparent;
	color: var(--at-accent);
	border-color: var(--at-accent);
}
.at-btn--ghost:hover {
	background: var(--at-accent);
	color: var(--at-on-accent);
}

/* Disabled (e.g. add-to-cart before a variation is chosen) — unmistakably inert. */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--at-surface-2);
	color: var(--at-text-muted);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---- Product badges (shared: Woo loop + homepage cards) ---- */
.at-badges {
	position: absolute;
	top: var(--at-space-3);
	left: var(--at-space-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--at-space-1);
	z-index: 2;
	pointer-events: none;
}
.at-badge {
	display: inline-block;
	padding: 3px var(--at-space-3);
	border-radius: 999px;
	font-size: var(--at-fs-100);
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.4;
}
.at-badge--sale   { background: var(--at-accent); color: var(--at-on-accent); }
.at-badge--design { background: var(--at-text); color: var(--at-bg); }
.at-badge--new    { background: var(--at-surface); color: var(--at-text); border: 1px solid var(--at-border); }

/* Utility container */
.at-container {
	max-width: var(--at-container);
	margin-inline: auto;
	padding-inline: var(--at-space-6);
}

/* Small, visible proof that morphing works: an accent chip (rendered in the
   footer by the segments plugin). Temporary Phase-1 demo. */
.at-segment-flag {
	display: inline-block;
	padding: var(--at-space-1) var(--at-space-3);
	border-radius: 999px;
	background: var(--at-accent);
	color: var(--at-on-accent);
	font-size: var(--at-fs-100);
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: var(--at-shadow);
}

/* ---- Blocksy palette integration ------------------------------------------
   Remap Blocksy's primary accent palette to our accent tokens. The whole theme
   (buttons, links, header, WooCommerce) then adopts the brand accent — and,
   because the tokens change per audience segment, it all morphs automatically.
   !important guards against Blocksy's inline palette definition regardless of
   source order; the var() still resolves per-segment at each element. */
:root {
	--theme-palette-color-1: var(--at-accent) !important;
	--theme-palette-color-2: var(--at-accent-hover) !important;
}

/* A logo image is set (and already contains the wordmark), so hide Blocksy's
   redundant text site-title to stop the logo/text overlap in the header. */
.ct-header .site-title-container {
	display: none;
}