/**
 * GIREM Catalog Engine v4 — Design Tokens
 * 8-point grid · Inter only · CSS variables
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.girem-catalog-engine,
.girem-catalog-engine * {
	box-sizing: border-box;
}

.girem-catalog-engine {
	/* Typography — compact B2B density (SmartShop-like) */
	--g-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--g-text-h1: 28px;
	--g-text-h2: 22px;
	--g-text-h3: 18px;
	--g-text-product: 14px;
	--g-text-price: 18px;
	--g-text-body: 14px;
	--g-text-spec: 12px;
	--g-text-caption: 11px;
	--g-text-btn: 13px;
	--g-text-card-title: 13px;
	--g-text-card-price: 17px;
	--g-text-card-meta: 11px;
	--g-lh-tight: 1.25;
	--g-lh-body: 1.45;

	/* Colors — brand purple unified with homepage */
	--g-color-bg: #ffffff;
	--g-color-surface: #f8fafc;
	--g-color-surface-2: #f1f5f9;
	--g-color-border: #e2e8f0;
	--g-color-border-strong: #cbd5e1;
	--g-color-text: #0f172a;
	--g-color-text-muted: #64748b;
	--g-color-text-soft: #94a3b8;
	--g-color-accent: #4933d1;
	--g-color-accent-hover: #3d29b8;
	--g-color-accent-soft: #eef2ff;
	--g-color-success: #15803d;
	--g-color-success-bg: #f0fdf4;
	--g-color-warning: #b45309;
	--g-color-warning-bg: #fffbeb;
	--g-color-danger: #b91c1c;
	--g-color-danger-bg: #fef2f2;

	/* Spacing — 8pt grid */
	--g-space-1: 8px;
	--g-space-2: 16px;
	--g-space-3: 24px;
	--g-space-4: 32px;
	--g-space-5: 40px;
	--g-space-6: 48px;

	/* Radius */
	--g-radius-sm: 6px;
	--g-radius-md: 10px;
	--g-radius-lg: 14px;
	--g-radius-pill: 999px;

	/* Shadow */
	--g-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--g-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
	--g-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);

	/* Card media — compact catalog grid */
	--g-card-media-h: 148px;
	--g-card-media-h-mobile: 120px;
	--g-card-pad: 10px;
	--g-card-gap: 4px;
	--g-btn-h: 36px;
	--g-btn-h-sm: 32px;

	/* Motion */
	--g-transition: 0.18s ease;

	font-family: var(--g-font);
	font-size: var(--g-text-body);
	line-height: var(--g-lh-body);
	color: var(--g-color-text);
	-webkit-font-smoothing: antialiased;
}

.girem-catalog-engine h1 { font-size: var(--g-text-h1); font-weight: 700; line-height: var(--g-lh-tight); }
.girem-catalog-engine h2 { font-size: var(--g-text-h2); font-weight: 700; line-height: var(--g-lh-tight); }
.girem-catalog-engine h3:not(.girem-v4-card__title) { font-size: var(--g-text-h3); font-weight: 600; line-height: var(--g-lh-tight); }