/**
 * Amiology — Design Tokens v2
 *
 * Rebuilt for value retail. The previous version was monochrome editorial,
 * which suited the wordmark but fought the business: practical, well-priced
 * products for everyday living need energy, scale, and prices you can read
 * across a room.
 *
 * THE RECONCILIATION
 *
 * The AMIOLOGY mark is a hard black block cropping a heavy wordmark. Rather
 * than abandoning that for retail brightness, the block becomes the system's
 * structural device: category tiles, price flashes, section rules and buttons
 * are all hard-edged blocks. Colour fills the blocks; the type stays
 * monochrome. That keeps the identity intact while giving the shop the
 * confidence the brief asks for.
 *
 * COLOUR IS FUNCTIONAL, NEVER DECORATIVE
 *
 * Amber means "act" — buttons and nothing else.
 * Red means "the price dropped" — never a heading, never a border for effect.
 * Green means "you can trust this" — stock, delivery, guarantees.
 * Category hues mean "you are in this department".
 *
 * If a colour appears somewhere that doesn't match one of those four
 * meanings, it is decoration and should be removed. That discipline is what
 * separates a confident discount retailer from a cluttered one.
 */

:root {

	/* ===================================================================
	 * NEUTRALS — structure and type
	 * ================================================================ */
	--ami-ink: #0b0b0c;        /* Headings, primary surfaces, the logo block */
	--ami-ink-2: #2a2a2e;      /* Body copy on white */
	--ami-ash: #6b6b72;        /* Secondary text. 5.4:1 on white. */
	--ami-line: #e4e4e7;       /* Hairlines and card borders */
	--ami-smoke: #f5f5f6;      /* Image wells, tinted rows */
	--ami-white: #ffffff;

	/* ===================================================================
	 * ACTION — amber
	 *
	 * Dark text on amber, not white. Yellow-on-white CTAs are among the most
	 * heavily tested patterns in ecommerce, and the dark-text version clears
	 * 11:1 contrast where white text on the same amber fails outright.
	 * ================================================================ */
	--ami-amber: #ffb302;
	--ami-amber-hover: #e89e00;
	--ami-amber-soft: #fff4da;
	--ami-on-amber: var(--ami-ink);

	/* ===================================================================
	 * PRICE REDUCTION — red. Reserved. Never used for emphasis generally.
	 * ================================================================ */
	--ami-sale: #d62839;
	--ami-sale-soft: #fdebec;
	--ami-on-sale: var(--ami-white);

	/* ===================================================================
	 * TRUST — stock status, delivery promises, guarantees
	 * ================================================================ */
	--ami-trust: #0e6e5c;
	--ami-trust-soft: #e6f2ef;
	--ami-on-trust: var(--ami-white);

	--ami-error: #9b1c1c;

	/* ===================================================================
	 * DEPARTMENTS
	 *
	 * Colour-coding categories is a wayfinding tool, not decoration: a
	 * returning shopper learns "garden is the blue one" and stops reading
	 * labels. All six are dark enough to carry white text at 7:1 or better.
	 * ================================================================ */
	--ami-cat-1: #1b3a6b;  /* Garden & Outdoor */
	--ami-cat-2: #0e6e5c;  /* Home */
	--ami-cat-3: #8b2f62;  /* Seasonal */
	--ami-cat-4: #b4491c;  /* Lighting */
	--ami-cat-5: #4a5d23;  /* Essentials */
	--ami-cat-6: #2d2a6e;  /* Electrical */

	/* Semantic aliases — components use these, not the raw scale above. */
	--ami-bg: var(--ami-white);
	--ami-fg: var(--ami-ink-2);
	--ami-fg-strong: var(--ami-ink);
	--ami-fg-muted: var(--ami-ash);
	--ami-border: var(--ami-line);
	--ami-surface: var(--ami-smoke);

	/* ===================================================================
	 * TYPE
	 *
	 * One heavy grotesque doing everything. Register real webfonts in
	 * amiology-core/assets/fonts/ and update these; self-hosted, never
	 * hotlinked from Google (UK GDPR).
	 * ================================================================ */
	--ami-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ami-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ami-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

	--ami-weight-regular: 400;
	--ami-weight-medium: 500;
	--ami-weight-semi: 600;
	--ami-weight-bold: 700;
	--ami-weight-extra: 800;
	--ami-weight-black: 900;

	/* Fluid, 360px → 1600px. Bolder and larger than v1 throughout. */
	--ami-text-2xs: 0.688rem;
	--ami-text-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.813rem);
	--ami-text-sm: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
	--ami-text-base: clamp(0.938rem, 0.9rem + 0.19vw, 1rem);
	--ami-text-lg: clamp(1.063rem, 1rem + 0.31vw, 1.188rem);
	--ami-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
	--ami-text-2xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
	--ami-text-3xl: clamp(2.125rem, 1.5rem + 3.1vw, 4rem);
	--ami-text-4xl: clamp(2.5rem, 1.4rem + 5.5vw, 6rem);

	/* Price needs its own scale — it is the most-scanned element on the page. */
	--ami-text-price: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
	--ami-text-price-lg: clamp(2rem, 1.5rem + 2.5vw, 3rem);

	--ami-leading-tight: 1.02;
	--ami-leading-snug: 1.22;
	--ami-leading-normal: 1.55;

	--ami-tracking-tight: -0.035em;
	--ami-tracking-normal: 0;
	--ami-tracking-wide: 0.08em;
	--ami-tracking-label: 0.14em;

	/* ===================================================================
	 * SPACE — 4px base
	 * ================================================================ */
	--ami-space-2xs: 0.25rem;
	--ami-space-xs: 0.5rem;
	--ami-space-sm: 0.75rem;
	--ami-space-md: 1rem;
	--ami-space-lg: 1.5rem;
	--ami-space-xl: 2.5rem;
	--ami-space-2xl: 4rem;
	--ami-space-3xl: 6rem;
	--ami-space-section: clamp(2.5rem, 1.5rem + 4vw, 5rem);

	/* Grid gap. Tight on purpose — density signals value. A discount
	   retailer with generous whitespace reads as expensive. */
	--ami-grid-gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem);

	/* ===================================================================
	 * LAYOUT — considerably wider than v1
	 * ================================================================ */
	/* One width for the whole site. Header, category grid, single product and
	   footer all read from this, so they align edge-to-edge as a shopper moves
	   between them. Change it here and everything follows. */
	--ami-container: 100rem;       /* 1600px */
	--ami-container-wide: 126rem;  /* 2016px — full-bleed hero bands only */
	--ami-container-narrow: 48rem; /* Prose only */
	--ami-gutter: clamp(0.875rem, 0.5rem + 1.6vw, 2rem);

	/* Hard corners throughout. The logo is a hard-edged block; nothing in
	   this system is rounded. */
	--ami-radius: 0;
	--ami-border-width: 1px;
	--ami-rule-width: 3px;  /* Section-heading rules */

	/* ---------------------------------------------------------------
	 * Logo
	 *
	 * Both values are clamps rather than fixed heights. A 100px logo is
	 * right on a desktop and dominates a phone header, where it would
	 * push the search field and the whole catalogue below the fold.
	 * The upper bound is the desktop size; the lower keeps it sane.
	 * --------------------------------------------------------------- */
	/*
	 * The lower bounds are deliberately generous. On a phone the logo now has
	 * a row to itself, so there is room for it to be the largest thing on the
	 * screen rather than something tucked beside a hamburger.
	 */
	--ami-logo-height: clamp(56px, 13vw, 100px);  /* uploaded logo image */
	--ami-logo-mark: clamp(52px, 12vw, 88px);     /* AM monogram */

	/* Sticky offsets read from this, so a taller header does not leave
	   sticky panels tucked underneath it. */
	--ami-header-offset: clamp(7rem, 4rem + 8vw, 11rem);

	/*
	 * How far the back-to-top button sits above the bottom edge.
	 *
	 * Clears the WhatsApp chat button, which parks itself bottom-right at
	 * roughly 60px plus its own margin. Raise this if that button is resized
	 * or another floating control is added to the same corner.
	 */
	--ami-top-offset: 6rem;

	/*
	 * How far the product gallery arrows sit from the top of the image.
	 *
	 * A fixed distance rather than vertical centring. Gallery images are not
	 * all the same height, so centred arrows sat at a different height on
	 * every product — and moved as the slider changed image. A fixed offset
	 * keeps them in one place, which is what makes them feel like a control
	 * rather than part of the picture.
	 */
	--ami-gallery-nav-top: 200px;

	/* Product card image ratio.
	 *
	 * 4:3, not square. The catalogue photography is overwhelmingly landscape —
	 * festoon strings, torches, projectors, salt lamp strings. Against a 1:1
	 * well, object-fit:contain shrinks a landscape image to fit the height and
	 * leaves the sides empty, so the product renders far smaller than the space
	 * allows. A landscape well lets those images fill nearly the full width.
	 *
	 * Move back towards 1/1 only if the photography becomes mostly square. */
	--ami-card-ratio: 4 / 3;

	/* Breathing room above the card image, so it does not sit against the
	   card's own border. */
	--ami-card-image-gap: 10px;

	/* ===================================================================
	 * MOTION — restrained
	 * ================================================================ */
	--ami-ease: cubic-bezier(0.2, 0, 0, 1);
	--ami-duration-fast: 120ms;
	--ami-duration: 220ms;
	--ami-duration-slow: 460ms;

	--ami-tap: 44px;

	--ami-z-header: 100;
	--ami-z-overlay: 900;
	--ami-z-modal: 1000;

	--ami-shadow-header: 0 1px 0 rgba(11, 11, 12, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ami-duration-fast: 1ms;
		--ami-duration: 1ms;
		--ami-duration-slow: 1ms;
	}
}