/**
 * GIREMRUS Design Tokens — single source of truth.
 * Brand primary: purple (Woodmart --wd-primary-color).
 */

:root {
	--girem-color-brand: var(--wd-primary-color, rgb(73, 51, 209));
	--girem-color-brand-rgb: 73, 51, 209;
	--girem-color-brand-strong: color-mix(in srgb, var(--girem-color-brand) 88%, #000 12%);
	--girem-color-brand-soft: rgba(var(--girem-color-brand-rgb), 0.08);
	--girem-color-brand-soft-strong: rgba(var(--girem-color-brand-rgb), 0.14);
	--girem-color-brand-border: rgba(var(--girem-color-brand-rgb), 0.18);
	--girem-color-brand-shadow: rgba(var(--girem-color-brand-rgb), 0.22);
	--girem-color-brand-shadow-hover: rgba(var(--girem-color-brand-rgb), 0.28);
	--girem-color-brand-hover-bg: rgba(var(--girem-color-brand-rgb), 0.06);

	--girem-color-navy: #163247;
	--girem-color-navy-text: #e8edf8;
	--girem-color-navy-muted: #8fa3b8;
	--girem-color-navy-link: #b8c5d6;
	--girem-color-teal: #0c8f84;

	--girem-color-bg: #f6f6f6;
	--girem-color-surface: #ffffff;
	--girem-color-text: var(--wd-title-color, #242424);
	--girem-color-muted: var(--wd-text-color, #777777);
	--girem-color-border: rgba(0, 0, 0, 0.08);
	--girem-color-subtle-bg: #fafafa;
	--girem-color-on-brand: #ffffff;
	--girem-color-overlay: rgba(15, 23, 42, 0.45);

	--girem-font-family: inherit;
	--girem-font-size-body: 16px;
	--girem-font-size-prose: 15px;
	--girem-font-size-sm: 14px;
	--girem-font-size-xs: 13px;
	--girem-font-size-eyebrow: 12px;
	--girem-font-size-h1: clamp(28px, 3.5vw, 48px);
	--girem-font-size-h1-hero: clamp(32px, 3.7vw, 50px);
	--girem-font-size-h2: clamp(24px, 3vw, 36px);
	--girem-font-size-h2-section: clamp(28px, 3.2vw, 42px);
	--girem-font-size-h3: clamp(22px, 2.2vw, 28px);
	--girem-font-size-h4: clamp(20px, 1.8vw, 24px);
	--girem-line-height-body: 1.7;
	--girem-line-height-prose: 1.75;
	--girem-line-height-heading: 1.12;
	--girem-line-height-heading-tight: 1.2;
	--girem-font-weight-bold: 700;
	--girem-font-weight-semibold: 600;
	--girem-font-weight-medium: 500;

	--girem-space-section-y: 28px;
	--girem-space-shell-x: 32px;
	--girem-shell-max: 1360px;
	--girem-space-gap: 14px;
	--girem-space-gap-lg: 20px;

	--girem-radius-xl: 18px;
	--girem-radius-lg: 14px;
	--girem-radius-md: 10px;
	--girem-radius-sm: 8px;
	--girem-radius-button: 6px;
	--girem-radius-pill: 999px;

	--girem-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
	--girem-shadow-panel: 0 16px 36px rgba(21, 36, 50, 0.05);
	--girem-shadow-button: 0 10px 24px var(--girem-color-brand-shadow);
	--girem-shadow-button-hover: 0 14px 28px var(--girem-color-brand-shadow-hover);
	--girem-shadow-drawer: -8px 0 32px rgba(15, 23, 42, 0.12);

	--girem-btn-min-height: 48px;
	--girem-btn-min-height-compact: 42px;
	--girem-btn-padding-x: 24px;
	--girem-btn-font-size: 15px;
	--girem-btn-font-size-compact: 13px;

	--girem-transition-fast: 0.2s ease;
	--girem-transition-base: 0.2s ease;
	--girem-focus-ring: 0 0 0 3px rgba(var(--girem-color-brand-rgb), 0.35);
	--girem-focus-outline: 2px solid var(--girem-color-brand);
	--girem-focus-outline-offset: 2px;

	--girem-z-header: 300;
	--girem-z-mobile-nav: 400;

	/* Brand logo — single dimension source (header-code, homepage lock).
	   Wordmark-only logo-mobile(-dark).svg is ~4.09:1 (188x46 viewBox);
	   widths below match that ratio at each height so object-fit:contain
	   fills the box instead of leaving dead space on the right. */
	--girem-logo-width: 162px;
	--girem-logo-height: 48px;
	--girem-logo-height-tablet: 44px;
	--girem-logo-height-mobile: 40px;
	--girem-logo-max-width-tablet: 148px;
	--girem-logo-max-width-mobile: 135px;

	/* Corporate header (Stage 2A) */
	--girem-header-height: 78px;
	--girem-header-shell: 1440px;
	--girem-header-border: #eceff5;
	--girem-header-cta: #4933d1;
	--girem-header-cta-hover: #3b27b8;
	--girem-header-nav-size: 15px;
	--girem-header-font: "Inter", system-ui, sans-serif;
}

/* Legacy --demo-* aliases (b2b-landing-demo.css compatibility) */
.girem-b2b-demo,
.giremrus-amo-page,
.girem-content-page,
.girem-code-site {
	--demo-bg: var(--girem-color-bg);
	--demo-surface: var(--girem-color-surface);
	--demo-text: var(--girem-color-text);
	--demo-muted: var(--girem-color-muted);
	--demo-border: var(--girem-color-border);
	--demo-accent: var(--girem-color-brand);
	--demo-accent-strong: var(--girem-color-brand);
	--demo-accent-rgb: var(--girem-color-brand-rgb);
	--demo-accent-soft: var(--girem-color-brand-soft);
	--demo-accent-soft-strong: var(--girem-color-brand-soft-strong);
	--demo-primary-text: var(--girem-color-on-brand);
	--demo-secondary-bg: var(--girem-color-surface);
	--demo-secondary-text: var(--girem-color-text);
	--demo-secondary-border: rgba(0, 0, 0, 0.12);
	--demo-panel-bg: var(--girem-color-surface);
	--demo-subtle-bg: var(--girem-color-subtle-bg);
	--demo-shadow: var(--girem-shadow-card);
	--demo-radius-xl: var(--girem-radius-xl);
	--demo-radius-lg: var(--girem-radius-lg);
	--demo-shell: var(--girem-shell-max);
}

/* Legacy --girem-home-* aliases (homepage namespace, Stage 1) */
.giremrus-home-enterprise {
	--girem-home-logo-width: var(--girem-logo-width);
	--girem-home-logo-height: var(--girem-logo-height);
	--girem-home-logo-height-tablet: var(--girem-logo-height-tablet);
	--girem-home-logo-height-mobile: var(--girem-logo-height-mobile);
	--girem-home-logo-max-width-tablet: var(--girem-logo-max-width-tablet);
	--girem-home-logo-max-width-mobile: var(--girem-logo-max-width-mobile);
}

.girem-code-site {
	--girem-home-logo-width: var(--girem-logo-width);
	--girem-home-logo-height: var(--girem-logo-height);
}

/* P2 — WooCommerce / Elementor typography bridge */
.woocommerce,
.woocommerce-page,
.elementor-page {
	--wd-title-color: var(--girem-color-text);
	--wd-text-color: var(--girem-color-muted);
}

.girem-focus-ring:focus-visible {
	outline: var(--girem-focus-outline);
	outline-offset: var(--girem-focus-outline-offset);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus-visible {
	background: var(--girem-color-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--girem-color-text);
	display: block;
	font-size: var(--girem-font-size-sm);
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 16px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--girem-shadow-card);
}