/**
 * Design tokens: colors, type, spacing. Change these to restyle the whole theme.
 *
 * 2026 refresh: every page (home, shop, product, wishlist, account, cart)
 * now shares one editorial visual language — a serif display face, a warmer
 * near-monochrome palette with one restrained accent, and sharp corners
 * throughout. --qg-radius/--qg-radius-lg were the old rounded-pill/rounded-
 * card values; they're now sharp too (rather than introducing a second radius
 * scale), so every existing rule that already reads them — account cards,
 * address cards, form fields, cart/quantity inputs, the single-product
 * gallery — falls in line automatically. --qg-radius-sharp stays as an
 * explicit alias for new code that wants to be unambiguous about intent.
 */

/*
 * 2026 type refresh: a distinctive display face for headings, paired with a
 * warmer, more legible workhorse for body/UI copy, both OFL-licensed
 * (Google Fonts) and self-hosted here as variable fonts rather than the
 * previous single-family (Jost) treatment. Amharic keeps falling back to
 * Noto Sans Ethiopic / Nyala either way, since neither Latin face covers
 * Ethiopic script.
 *
 * Bricolage Grotesque (headings) — a contemporary grotesque with real
 * personality (ink-trap-influenced curves, a wide optical-size axis for
 * crisp display sizes) rather than a generic geometric sans; it's what
 * carries the "cool" the brand asked for.
 * Plus Jakarta Sans (body/UI) — clean, warm, highly legible at small
 * sizes, with tabular-friendly numerals that matter on a price-heavy
 * storefront. Both are variable fonts, so one file each covers every
 * weight the site uses instead of shipping several static cuts.
 */
@font-face {
	font-family: 'Bricolage Grotesque var';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/bricolage-var-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Plus Jakarta Sans var';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/jakarta-var-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Plus Jakarta Sans var';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/jakarta-var-latin-italic.woff2') format('woff2');
}

:root {
	/* Color — --qg-color-accent/-dark now matches the brand's own CTA
	   gradient family (--qg-gradient-cta below: #ff3030 → #ff4a1f →
	   #ff7924, the exact red-orange every button/badge on the site uses),
	   instead of the older, more muted burnt orange — so every OTHER place
	   that reads --qg-color-accent for a flat color (link/icon/border text,
	   not a button background) automatically matches the buttons too,
	   without hunting down each one individually. --qg-color-danger is its
	   own true red, split out from accent so "error" and "brand/CTA" don't
	   share one color even though both are now in the red family. */
	--qg-color-ink: #1a1a1a;
	--qg-color-ink-soft: #555555;
	--qg-color-muted: #888888;
	/* --qg-color-bg is the page itself — pure white, per the 2026 "brighter,
	   cleaner" brief. --qg-color-paper stays the soft warm off-white it's
	   always been, now reserved for the subtle tray/alternating-section
	   and input tints that keep cards and sections readable against that
	   white page instead of every surface going flat. */
	--qg-color-bg: #ffffff;
	--qg-color-paper: #f6f2ec;
	--qg-color-surface: #fffdfa;
	--qg-color-line: #e6ddd0;
	--qg-color-accent: #ff4a1f;
	--qg-color-accent-dark: #e92727;
	--qg-color-accent-soft: #ffe1d1;
	--qg-color-yellow: #ffc94d;
	--qg-color-success: #2f6b4f;
	--qg-color-danger: #c0392b;

	/* Nav — a cool, blue-black charcoal (not the brand's warm ink) used only
	   by the header/nav bar, so it reads as a deliberate, premium slab that
	   pops against the warm orange hero/pages instead of blending into
	   whatever's behind it. --qg-color-nav-glow is the accent line along its
	   bottom edge. */
	--qg-color-nav: #0b0e14;
	--qg-color-nav-soft: #050709;
	--qg-color-nav-line: rgba(255, 255, 255, 0.08);
	--qg-gradient-nav: linear-gradient(180deg, #12161f 0%, #0b0e14 60%, #050709 100%);

	/* Warm gradient — the reference's signature light-orange hero treatment
	   (peach → vivid orange). Used for the homepage hero panel and other
	   "hero moment" surfaces; --qg-gradient-warm-soft is the same family at
	   low opacity, for light section backgrounds. */
	--qg-gradient-warm: linear-gradient(135deg, #e8b87a 0%, #d98841 45%, #d96d1d 75%, #b8540f 100%);
	--qg-gradient-warm-soft: linear-gradient(180deg, #fdf1e6 0%, #f5decb 100%);

	/* CTA gradient — the primary action color sitewide (Add to Cart,
	   Shop Now, Place Order, every .qg-btn--primary): a brighter red→orange
	   sweep, requested specifically over the single flat accent color
	   above for every primary call-to-action. */
	--qg-gradient-cta: linear-gradient(100deg, #ff3030 0%, #ff4a1f 50%, #ff7924 100%);
	--qg-gradient-cta-hover: linear-gradient(100deg, #e92727 0%, #f04418 50%, #f56818 100%);

	/* Type — see the @font-face comment above for why these two, specifically. */
	--qg-font-heading: 'Bricolage Grotesque var', 'Noto Sans Ethiopic', 'Nyala', system-ui, -apple-system, Segoe UI, sans-serif;
	--qg-font-body: 'Plus Jakarta Sans var', 'Noto Sans Ethiopic', 'Nyala', system-ui, -apple-system, Segoe UI, sans-serif;
	--qg-tracking-label: 0.14em;

	/* Space */
	--qg-space-1: 0.25rem;
	--qg-space-2: 0.5rem;
	--qg-space-3: 1rem;
	--qg-space-4: 1.5rem;
	--qg-space-5: 2.5rem;
	--qg-space-6: 4rem;
	--qg-space-7: 6rem;
	/* New, more generous editorial rhythm — used by the new homepage
	   sections/header/footer only, so existing page layouts (tuned to the
	   scale above) don't shift. */
	--qg-space-8: 8rem;
	--qg-space-9: 11rem;

	/* Layout — sharp across the whole system now (see header comment). */
	--qg-radius: 3px;
	--qg-radius-lg: 4px;
	--qg-radius-sharp: 2px;
	--qg-header-height: 84px;
	--qg-shadow-sm: 0 1px 2px rgba(15, 14, 14, 0.06);
	--qg-shadow-md: 0 8px 24px rgba(15, 14, 14, 0.10);
	--qg-shadow-lg: 0 24px 60px -14px rgba(15, 14, 14, 0.28);
	--qg-shadow-glow: 0 10px 28px -6px rgba(255, 37, 37, 0.35);
	--qg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
	:root {
		--qg-header-height: 76px;
	}
}