/* ITEMPLS design system — tokens.
 *
 * Every colour, radius, shadow and step in the type scale is defined once
 * here. Nothing downstream may hardcode a value: swapping the accent or
 * retuning the surfaces has to be a change to this file alone, or the
 * system is decorative rather than a system.
 *
 * The palette is built for a dark, transactional marketplace. Deep neutral
 * surfaces keep item art the brightest thing on the page, which is what a
 * shopper is actually scanning for. The accent is a warm amber chosen to
 * read as premium next to metal and gemstone art, and deliberately not
 * Blizzard's red-and-gold treatment.
 *
 * MODE COLOUR IS LOAD-BEARING. Ladder is amber, Non-Ladder is blue,
 * everywhere in the site, without exception. It is never the only signal --
 * every mode indicator also carries the word -- because colour alone fails
 * for colour-blind users and in greyscale. But being consistent makes the
 * distinction learnable in one visit, and "which mode am I buying" is the
 * single most expensive question this shop can leave unanswered.
 */

:root {
	/* --- neutral surfaces, darkest to lightest --- */
	--it-bg:            #0b0e13;   /* page */
	--it-surface:       #12161d;   /* cards, panels */
	--it-surface-2:     #181d26;   /* raised: hover, popovers */
	--it-surface-3:     #212834;   /* inputs, wells */
	--it-line:          #2a323f;   /* borders */
	--it-line-strong:   #3a4453;

	/* --- text --- */
	--it-text:          #eef2f7;
	--it-text-muted:    #a3aec0;
	--it-text-faint:    #6b7688;
	--it-text-on-accent:#1a1205;

	/* --- brand accent --- */
	--it-accent:        #f5a524;
	--it-accent-hover:  #ffb943;
	--it-accent-press:  #d98c12;
	--it-accent-soft:   rgba(245, 165, 36, 0.12);
	--it-accent-line:   rgba(245, 165, 36, 0.38);

	/* --- mode identity. Load-bearing; see the note above. --- */
	--it-ladder:        #f5a524;
	--it-ladder-soft:   rgba(245, 165, 36, 0.13);
	--it-ladder-line:   rgba(245, 165, 36, 0.45);
	--it-nonladder:     #60a5fa;
	--it-nonladder-soft:rgba(96, 165, 250, 0.13);
	--it-nonladder-line:rgba(96, 165, 250, 0.45);

	/* --- status --- */
	--it-ok:            #2dd4a7;
	--it-ok-soft:       rgba(45, 212, 167, 0.12);
	--it-warn:          #fbbf24;
	--it-danger:        #f87171;
	--it-danger-soft:   rgba(248, 113, 113, 0.12);

	/* --- type ---
	 * A system stack, on purpose. A webfont on a transactional storefront
	 * costs a round trip and a layout shift before the first price is
	 * readable, and the brand character lives in the wordmark (an SVG, so
	 * it needs no font at all) rather than in the body copy.
	 */
	--it-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--it-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--it-fs-xs:   0.75rem;
	--it-fs-sm:   0.8125rem;
	--it-fs-base: 0.9375rem;
	--it-fs-md:   1.0625rem;
	--it-fs-lg:   1.25rem;
	--it-fs-xl:   1.5rem;
	--it-fs-2xl:  2rem;
	--it-fs-3xl:  2.75rem;

	--it-lh-tight: 1.15;
	--it-lh:       1.55;

	/* --- spacing: a 4px rhythm --- */
	--it-s1: 4px;
	--it-s2: 8px;
	--it-s3: 12px;
	--it-s4: 16px;
	--it-s5: 24px;
	--it-s6: 32px;
	--it-s7: 48px;
	--it-s8: 64px;

	/* --- shape --- */
	--it-r-sm: 6px;
	--it-r:    10px;
	--it-r-lg: 16px;
	--it-r-pill: 999px;

	--it-shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.28);
	--it-shadow-lg: 0 8px 40px rgba(0,0,0,.55);

	/* --- motion. Short; this is a shop, not a showreel. --- */
	--it-t: 140ms cubic-bezier(.2,.6,.3,1);

	/* --- layout --- */
	--it-max: 1320px;
	--it-gutter: 16px;

	/* The one image aspect ratio in the system. Every product image area
	 * uses it, so a grid never staggers because one item has taller art. */
	--it-card-ratio: 1 / 1;

	--it-focus: 0 0 0 2px var(--it-bg), 0 0 0 4px var(--it-accent);

	/* --- the media well (design V2) ---
	 * Legacy item art has a white background baked in; on a dark card it read
	 * as a white rectangle floating in the dark. Rather than strip it (which
	 * damages the art) the image area is a deliberate LIGHT plinth, and art is
	 * multiplied onto it: white becomes the well, transparent art sits on it,
	 * and every card looks the same whatever its source. */
	--it-well-hi:  #f4f1ea;
	--it-well-lo:  #d6d0c2;
	--it-well:     radial-gradient(115% 95% at 50% 18%, var(--it-well-hi) 0%, var(--it-well-lo) 100%);
	--it-well-ink: #5d5647;   /* text/icons ON the well */
}

@media (min-width: 768px) {
	:root { --it-gutter: 24px; }
}

/* Respect a user who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
	:root { --it-t: 1ms; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}