/* ---------------------------------------------------------------
   Design tokens. Colours are sampled from the bedroom illustration
   and the release-selected panel asset - no stock palette values.
   --------------------------------------------------------------- */
:root {
  /* brand */
  --violet-900: #2b0f2e;
  --violet-800: #46184a;
  --violet-700: #6b2470;
  --violet-600: #8b2f93;
  --violet-500: #a63dad;
  --violet-400: #b95fc4;
  --orchid-300: #cf9ae0;
  --orchid-200: #e3bdf0;
  --petal-200:  #f4cdec;
  --petal-100:  #f9e2f6;
  --cream:      #fdf4fb;

  --ink:        #2a0f2c;
  --ink-soft:   rgba(42, 15, 44, .62);
  --on-art:     #ffffff;

  /* surfaces: base -> elevated -> floating */
  --surface-1: rgba(122, 45, 128, .58);
  --surface-2: rgba(150, 62, 158, .78);
  --surface-3: rgba(171, 82, 180, .92);
  --hairline:  rgba(255, 255, 255, .28);

  /* layered, colour-tinted shadows */
  --shadow-cover:
     0 2px 6px rgba(43, 15, 46, .28),
     0 10px 24px rgba(43, 15, 46, .30),
     0 24px 60px rgba(107, 36, 112, .28);
  --shadow-float:
     0 1px 2px rgba(43, 15, 46, .30),
     0 12px 28px rgba(43, 15, 46, .34),
     0 40px 90px rgba(70, 24, 74, .40);
  --glow-active: 0 0 42px 6px rgba(233, 176, 246, .38);

  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- scrollbars ----
     One pair of colours for every scrolling box on the site. Sampled from the
     scrollbar the owner drew over a screenshot of the announcement popup
     (thumb 193,97,122 / track 218,174,185, a 10px track with a 6px thumb
     inset 2px a side), which is where the geometry in site.css comes from
     too. A home post can override both through --scroll-thumb/--scroll-track;
     everything else on the site uses these. */
  --scroll-thumb: #c1617a;
  --scroll-track: #daaeb9;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* type */
  --font-display: 'Poppins', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body: 'Questrial', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;

  /* ---- carousel geometry, reverse-engineered from the mockup ----
     Cover n sits at  x = n * SPREAD / (1 + DEPTH*|n|)  with
     scale = 1 / (1 + DEPTH*|n|).  Fitting the four covers measured in
     musicpage-desktop-static-mockup.jpg gave DEPTH 0.1834 and
     SPREAD 448.5px at a 1920px-wide stage (23.36vw).            */
  --cover-size: clamp(150px, 15.4vw, 330px);
  --cover-spread: 23.36;   /* vw, unitless here - JS applies it */
  --cover-depth: 0.1834;
  --cover-axis: 45.4%;     /* vertical centre of the cover row */

  /* Snap timing measured from the reference sheets: motion spans three
     210ms frames with a decelerating tail. Best-fit bezier below. */
  --snap-duration: 520ms;
  --snap-ease: cubic-bezier(0.30, 0.15, 0.65, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --snap-duration: 1ms; }
}