/* ==========================================================================
   Design tokens — Hermes Abreu
   Language: Constructivist editorial. Heavy condensed display type, one hot
   accent, full-bleed photography, generous negative space.
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --void: #050506;
  --ink: #0a0a0b;
  --ink-soft: #131315;
  --ink-line: #232326;
  --bone: #ece7df;
  --bone-dim: #b9b3a9;
  --ash: #76716a;
  --flare: #ff3b14;
  --flare-deep: #c02305;

  --bg: var(--ink);
  --fg: var(--bone);

  /* ---- Type families ---- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans: 'Archivo', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Fluid type scale (clamped, viewport-aware) ---- */
  --step--1: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  --step-0: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --step-4: clamp(2.8rem, 1.8rem + 4.6vw, 6rem);
  --step-5: clamp(3.6rem, 1.6rem + 9vw, 10rem);
  --mega: clamp(4.5rem, 0.5rem + 17vw, 19rem);

  /* ---- Space ---- */
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 4rem);
  --section-y: clamp(5rem, 3rem + 9vw, 12rem);
  --rule: 1px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 460ms;

  /* ---- Depth ---- */
  --z-nav: 60;
  --z-rail: 50;
  --z-lightbox: 90;
  --z-loader: 100;
}

/* The catalog and lightbox invert to a gallery-white surface. */
.surface-bone {
  --bg: var(--bone);
  --fg: var(--ink);
}