/* ============================================================
   SPECIMEN/4 — shared design tokens
   A motion-design exhibition catalogue. Each room overrides the
   four --room-* hooks on :root; every piece of shared chrome
   (header, footer, labels) recolors from them automatically.
   ============================================================ */

:root {
  /* type faces */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* modular type scale */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.1875rem;
  --text-lg:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-xl:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-2xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --text-3xl:  clamp(3rem, 1.9rem + 5.5vw, 6rem);
  --text-hero: clamp(3.5rem, 12vw, 11rem);

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-12: 16rem;

  /* radii + house easing */
  --radius-sm: 6px;
  --radius-md: 14px;
  --ease-page: cubic-bezier(.22, 1, .36, 1);

  /* neutral ink ramp */
  --ink-0:   #F7F6F2;
  --ink-100: #E8E6E0;
  --ink-200: #D3D1CA;
  --ink-300: #B5B3AC;
  --ink-400: #908E88;
  --ink-500: #6E6C67;
  --ink-600: #4C4B47;
  --ink-700: #343330;
  --ink-800: #201F1E;
  --ink-900: #121211;

  /* per-room accent hooks — each room page overrides these on :root */
  --room-bg: #0B0B0D;
  --room-ink: #F2EFE9;
  --room-accent: #E8B44F;
  --room-accent-2: #8C8A94;

  /* derived conveniences (recompute automatically per room) */
  --hairline: color-mix(in srgb, var(--room-ink) 14%, transparent);
  --ink-soft: color-mix(in srgb, var(--room-ink) 65%, var(--room-bg));
  --header-h: 3.5rem;
}