/*
 * Steelnoir shop design tokens (owner, 2026-10-17): the colours (the ONLY colour literals), font stacks, type scale,
 * spacing, radii, shadows and layout widths. shop.css and every later shop stylesheet take them with var(--…); small
 * fixed details (a 1px rule, a 6px dot, a gradient angle) may stay in shop.css. test/shop-layout.test.ts fails when a
 * CSS file in this folder (any depth) other than tokens.css contains a hex, rgb(), hsl() or named colour.
 *
 * Source: the :root tokens of the light base in design/mockups/project/fk.css (light base, black ink, one small amber accent).
 *
 * Ground (owner, 2026-10-28): a cool, near-neutral stone instead of the warm cream of the mockup, which read too close to
 * bluedvd.pl's beige. --s2, --ln and --ln-ui follow it; the ink, amber and status colours stay.
 *
 * Contrast (WCAG 2.2, computed from the hex values below; test/shop-layout.test.ts recomputes them):
 *   text on the page and card surfaces            ratio
 *   --tx  on --bg    16.99:1   --tx  on --s1   18.88:1
 *   --mu  on --bg     6.40:1   --mu  on --s1    7.12:1   --mu on --s2    5.90:1
 *   --act on --bg     5.10:1   --act on --s1    5.67:1   --act on --s2   4.70:1
 *   --acx on --ac     9.48:1   (amber button, dark text)
 *   --bg  on --tx    16.99:1   (black button, light text)
 *   --ok  on --bg     4.74:1   --low on --bg    4.94:1   (status words)
 *   non-text (3:1 needed): --focus on --bg 16.99:1; --ln-ui on --bg 3.57:1, on --s1 3.97:1; the steel frame's darkest stop #565D66 on --bg 6.02:1.
 * Nothing had to be darkened: --mu and --act of the mockup already pass 4.5:1 on --bg. Two things were added because
 * the mockup fails them: the focus ring (mockup: amber --ac on --bg is 1.77:1) now uses --focus (= --tx), and form
 * borders use --ln-ui (mockup #BDB4A7 is 1.85:1) instead of the hairline --ln. --ac is never text and never the only
 * sign of state: it is for fills with --acx on top, and for the logo slit.
 */
:root {
  /* colour: surfaces and ink */
  --bg: #F3F3F0;
  --s1: #FFFFFF;
  --s2: #EAEAE6;
  --ln: #DEDED9;
  --ln-ui: #80807A;
  --tx: #111111;
  --mu: #5E574E;
  /* colour: the amber accent (fills), its text colour on top, and amber as text on light surfaces */
  --ac: #E8B04B;
  --acx: #1A1206;
  --act: #8F5C0A;
  /* colour: status words and the focus ring */
  --ok: #2E7A44;
  --low: #B4452A;
  --focus: #111111;
  /* colour: text over photos and the scrim that keeps it readable */
  --on-photo: #FFFFFF;
  --on-photo-mu: rgba(255, 255, 255, 0.82);
  --scrim: rgba(17, 17, 17, 0.62);
  /* the edition frame around a cover tile (owner, 2026-10-28): a steelbook's cover sits in a brushed-steel ring, a diagonal run
     of silver tones with its darker stops read well over 3:1 on the page (#565D66 on --bg 6.02:1), plus its soft outer shadow; a box
     set's in the ink; a standard edition keeps the hairline. So the edition reads from the grid before the title does. */
  --ed-steel: linear-gradient(135deg, #C4C9D0 0%, #6B727C 24%, #E4E7EB 50%, #565D66 76%, #B4BAC2 100%);
  --ed-steel-shadow: 0 1px 2px rgba(20, 24, 30, 0.18);
  /* the PL pill on a cover (owner, 2026-10-26): its little flag in the flag's red and white */
  --tag-pl: #DC143C;
  --tag-ring: rgba(0, 0, 0, 0.15);
  /* the dark backdrop behind the video modal; its close button is --on-photo on it */
  --backdrop: rgba(11, 10, 9, 0.88);
  --scrim-photo: linear-gradient(0deg, rgba(11, 10, 9, 0.92) 15%, rgba(11, 10, 9, 0.2) 70%);
  /* narrow screens: the text sits over the lit steelbooks, so the scrim stays darker higher up (hero text contrast, measured 2026-10-17) */
  --scrim-photo-narrow: linear-gradient(0deg, rgba(11, 10, 9, 0.92) 15%, rgba(11, 10, 9, 0.62) 75%);
  /* the home slider (components/banners.tsx): cream text and its muted line on the dark templates, the bars and arrows on dark
     and on light slides, the dark templates' grounds and the art template's orange (taken from its picture) */
  --bn-cream: #F4EFE6;
  --bn-cream-mu: rgba(244, 239, 230, 0.78);
  --bn-ground: radial-gradient(120% 90% at 78% 40%, #3A2A12 0%, #17130D 45%, #0B0A09 100%);
  --bn-ground-art: #0B0706;
  --bn-orange: #FF9A3C;
  --bn-bar: rgba(255, 255, 255, 0.35);
  --bn-bar-light: rgba(0, 0, 0, 0.18);
  --bn-arrow: rgba(0, 0, 0, 0.35);
  --bn-fade: linear-gradient(#000 70%, transparent);

  /* fonts: self-hosted variable fonts (shop.css @font-face); the Fallback faces match their metrics to keep layout shift low */
  --f: 'Geist Variable', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m: 'Geist Mono Variable', 'Geist Mono Fallback', ui-monospace, Menlo, Consolas, monospace;
  --d: 'Archivo Variable', 'Archivo Fallback', 'Arial Narrow', Impact, sans-serif;

  /* type scale (rem: follows the reader's browser setting); display sizes grow with the viewport */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-display: clamp(3rem, 1.8rem + 5vw, 5.5rem);
  /* two thirds of the display size, for the home hero (owner, 2026-10-17) */
  --fs-display-hero: clamp(2rem, 1.2rem + 3.3vw, 3.67rem);
  --lh-tight: 0.98;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --ls-caps: 0.08em;
  --ls-wordmark: 0.34em;

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* layout and targets */
  --wrap: 80rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --tap: 2.75rem; /* 44 px: the minimum size of every link, button and field */
  --bw: 1px;

  /* radii */
  --r-sm: 2px;
  --r-md: 5px;
  --r-pill: 999px;

  /* shadows: a packshot on the page, and the same as a filter for cut-out images */
  --shadow-cover: 0 14px 30px -16px rgba(40, 30, 20, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-drop: drop-shadow(0 10px 16px rgba(40, 30, 20, 0.28));
  /* a dropdown panel of the list filters, lifted off the page */
  --shadow-pop: 0 10px 24px rgba(20, 16, 10, 0.16);
  /* A floating filter panel's height cap, set by shop.js to the room left above the window's bottom edge. */
  --fdd-room: none;
}