/* XHIGH v4 skin tokens. From brand/v4/final/tokens/tokens.css (the final web tokens), plus the engine's aliases.
   One family (Archivo), two roles. Black, white and a grey ramp. One accent, Select, which only ever means "selected".
   Images, cards, buttons and chips are square. Light by default; dark follows the system unless data-theme says light. */
:root {
  color-scheme: light;
  /* colour: neutrals */
  --xh-ink: #0B0B0B; --xh-white: #FFFFFF;
  --xh-grey-900: #1C1C1B; --xh-grey-800: #2A2A28; --xh-grey-500: #6B6B68; --xh-grey-400: #9E9E9A;
  --xh-grey-300: #CACAC6; --xh-grey-200: #D9D9D5; --xh-grey-100: #F4F4F2;
  --xh-select: #2F4BFF; --xh-error: #B3261E;
  /* roles */
  --bg: var(--xh-white); --bg-alt: var(--xh-grey-100); --text: var(--xh-ink); --text-2: var(--xh-grey-500); --text-3: var(--xh-grey-400);
  --line: var(--xh-grey-200); --line-strong: var(--xh-grey-300); --btn: var(--xh-ink); --btn-text: var(--xh-white); --btn-hover: var(--xh-grey-500);
  --plate: var(--xh-grey-100); --plate-ink: var(--xh-ink);
  --sel: var(--xh-select); --on-sel: var(--xh-white); --err: var(--xh-error);
  --scrim-c: rgba(11, 11, 11, .36);
  /* type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --d-stretch: 62%; --d-weight: 900; --l-stretch: 87.5%;
  --d-xl: 120px; --d-l: 76px; --d-m: 48px; --d-s: 40px;
  --t-1: 32px; --t-2: 24px; --t-3: 20px; --t-body: 16px; --t-small: 14px; --t-micro: 12px;
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --s7: 48px; --s8: 60px; --s9: 84px; --s10: 120px;
  --margin: 48px; --hdr: 60px; --util: 36px; --buy: 376px; --rail-w: 240px;
  /* motion */
  --ease-ui: cubic-bezier(.4, 0, .2, 1); --ease-mark: cubic-bezier(.7, 0, .2, 1);
  --d1: 150ms; --d2: 250ms; --d3: 400ms; --d-mark: 600ms; --notch: 2px;
  --card-ar: 1 / 1;          /* the lane photographs are square; cards and gallery match them, so nothing letterboxes */

  /* engine aliases (engine/engine.css reads these names) */
  --paper: var(--bg); --ink: var(--text); --graphite: var(--text-2); --rule: var(--line); --scrim: var(--scrim-c); --focus: var(--sel);
  --gutter: var(--margin); --maxw: 1440px; --col-gap: 12px; --card-min: 240px; --media-ar: 1 / 1; --ease: var(--ease-ui); --ease-out: var(--ease-ui); --zoom: 1.6;
  --f-display: var(--font); --f-body: var(--font); --f-mono: var(--font); --display-stretch: var(--d-stretch); --display-weight: var(--d-weight);
}
@media (max-width: 599px) {
  :root { --margin: 24px; --d-l: 40px; --d-xl: 56px; --d-m: 40px; --t-1: 24px; }
}
@media (max-width: 959px) {
  :root { --col-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --d1: 0ms; --d2: 0ms; --d3: 0ms; --d-mark: 0ms; --notch: 0px; }
}
/* dark: Ink surfaces, white type; product grounds stay Fog, since the photographs are made on light grounds */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--xh-ink); --bg-alt: var(--xh-grey-900); --text: var(--xh-white); --text-2: #A8A8A4; --text-3: #75756F;
    --line: #2E2E2C; --line-strong: #4A4A47; --btn: var(--xh-white); --btn-text: var(--xh-ink); --btn-hover: #C9C9C5;
    --plate: #E9E9E6; --scrim-c: rgba(0, 0, 0, .6); --sw-ring: rgba(255, 255, 255, .28);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--xh-ink); --bg-alt: var(--xh-grey-900); --text: var(--xh-white); --text-2: #A8A8A4; --text-3: #75756F;
  --line: #2E2E2C; --line-strong: #4A4A47; --btn: var(--xh-white); --btn-text: var(--xh-ink); --btn-hover: #C9C9C5;
  --plate: #E9E9E6; --scrim-c: rgba(0, 0, 0, .6); --sw-ring: rgba(255, 255, 255, .28);
}