/* ============================================================
   InTheRoom Productions — Spacing, radius, layout, motion, depth
   Base unit 4px. Radius is "almost always 0, sometimes circular."
   ============================================================ */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 64px;
  --space-section: 96px; /* between major editorial bands */

  /* ---- Radius — binary: none or full ---- */
  --radius-none: 0px;   /* DEFAULT: buttons, cards, photos, inputs, spec cells */
  --radius-xs:   2px;   /* rare — legal CTAs */
  --radius-sm:   4px;   /* small toggle pills on configurator surfaces */
  --radius-md:   6px;   /* rare — dropdown menu items */
  --radius-full: 9999px;/* circular icon buttons, carousel arrows */

  /* ---- Layout ---- */
  --container-max: 1440px; /* wide — gives photography breathing room */
  --gutter:        24px;   /* between cards in grids */
  --nav-height:    64px;

  /* ---- The Threshold stripe (signature divider) ---- */
  --stripe-height: 3px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--hairline);
  --border-strong:   1px solid var(--hairline-strong);

  /* ---- Elevation: depth comes from photography + surface steps, not shadow ----
     The few shadows are tight and near-black, never soft "SaaS" glows. */
  --shadow-none: none;
  --shadow-overlay: 0 24px 64px rgba(0,0,0,0.65);  /* dialogs / launchers over photo */
  --shadow-lift:    0 8px 24px rgba(0,0,0,0.5);

  /* Protection gradient: dark wash under text laid over full-bleed photography */
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0) 75%); /* @kind other */
  --scrim-left:   linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 80%); /* @kind other */

  /* ---- Motion — restrained, mechanical. No bounce. ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
}