/* =========================================================================
   HollaJack — design tokens
   Style guide §3 (colour), §4 (type), §6 (layout, spacing, corners)

   Two neutrals + ink + one accent. The artwork supplies everything else.
   ========================================================================= */

:root {
	/* --- Paper / surfaces --------------------------------------------- */
	--hj-bone:        #F5F2EA;  /* primary page background — warm archival paper */
	--hj-bone-deep:   #ECE7DB;  /* alternating section band, subtle depth */
	--hj-card:        #FBFAF6;  /* raised cards / image mats, just above bone */

	/* --- Ink / text ---------------------------------------------------- */
	--hj-ink:         #16130F;  /* primary text, near-black (never pure #000) */
	--hj-ink-soft:    #4A453C;  /* secondary text, body copy on paper */
	--hj-stone:       #8A8478;  /* captions, eyebrows, metadata, muted UI */

	/* --- Accent — collectible signal ONLY ------------------------------ */
	--hj-brass:       #A8823C;  /* edition numbers, authentication marks, chop */
	--hj-brass-deep:  #7A5E28;  /* brass text on light bg, hover state */

	/* --- Structural ---------------------------------------------------- */
	--hj-line:        rgba(22, 19, 15, 0.12);
	--hj-line-strong: rgba(22, 19, 15, 0.22);

	/* --- Signature detail ---------------------------------------------- */
	--hj-graphite:    #3A3732;  /* pencil-signed edition numbering treatment */

	/* --- Error is the ONLY red. Never used for sale or urgency. --------- */
	--hj-error:       #9B2C2C;

	/* --- Typefaces ------------------------------------------------------
	   Two only. A high-contrast fashion serif against a clean grotesque. */
	--hj-display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
	--hj-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* --- Type scale (§4) ------------------------------------------------ */
	--hj-size-display-xl: 3.75rem;  /* 60px hero */
	--hj-size-display-l:  2.5rem;   /* 40px section title */
	--hj-size-display-m:  1.75rem;  /* 28px product name */
	--hj-size-body:       1rem;     /* 16px */
	--hj-size-small:      0.875rem; /* 14px */
	--hj-size-eyebrow:    0.75rem;  /* 12px */
	--hj-size-price:      1rem;     /* 16px */

	--hj-leading-display-xl: 1.04;
	--hj-leading-display-l:  1.1;
	--hj-leading-display-m:  1.15;
	--hj-leading-body:       1.65;

	--hj-track-eyebrow: 0.12em;

	/* --- Spacing scale (§6) — use these, nothing between ---------------- */
	--hj-1:   4px;
	--hj-2:   8px;
	--hj-3:   12px;
	--hj-4:   16px;
	--hj-5:   24px;
	--hj-6:   32px;
	--hj-7:   48px;
	--hj-8:   64px;
	--hj-9:   96px;
	--hj-10:  128px;

	/* --- Corners: near-sharp, editorial -------------------------------- */
	--hj-radius-control: 2px;  /* buttons, inputs */
	--hj-radius-mat:     4px;  /* image cards / mats */
	--hj-radius-placard: 0;    /* placards and the ledger read as printed labels */

	/* --- Layout --------------------------------------------------------- */
	--hj-maxw:      1280px;
	--hj-maxw-prose: 68ch;  /* generous measure, ~60–70 characters */
	--hj-gutter:    var(--hj-6);
	--hj-section-y: var(--hj-9);

	/* --- Motion (§13): crossfades, not slides -------------------------- */
	--hj-fade: 200ms ease;
}

@media (max-width: 900px) {
	:root {
		--hj-size-display-xl: 2.5rem;   /* 40px */
		--hj-size-display-l:  1.875rem; /* 30px */
		--hj-size-display-m:  1.5rem;   /* 24px */
		--hj-size-eyebrow:    0.6875rem;
		--hj-gutter:          var(--hj-5);
		--hj-section-y:       var(--hj-8);
	}
}

/* Respect reduced motion everywhere (§13). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--hj-fade: 1ms linear;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}