:root {
  /* Light surfaces: shadows are near-invisible; structure comes from hairlines. */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--line-hairline);
  --shadow-1: 0 1px 2px rgba(18, 18, 17, 0.04), 0 0 0 1px rgba(18, 18, 17, 0.05);
  --shadow-2: 0 8px 24px -12px rgba(18, 18, 17, 0.16), 0 0 0 1px rgba(18, 18, 17, 0.06);
  --shadow-3: 0 32px 64px -24px rgba(18, 18, 17, 0.24), 0 0 0 1px rgba(18, 18, 17, 0.06);
  /* Product mockups floating on dark ground */
  --shadow-mockup: 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Accent glow — dark surfaces only, one per view, low opacity. */
  --glow-accent: 0 0 120px -20px rgba(var(--accent-rgb) / 0.45);
  --ring-accent: 0 0 0 1px rgba(var(--accent-rgb) / 0.4), 0 0 0 4px rgba(var(--accent-rgb) / 0.14);
  --ring-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px rgba(var(--accent-rgb) / 0.75);

  /* Protection gradients — over imagery / at scroll edges. */
  --scrim-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 62%); /* @kind other */
  --scrim-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%); /* @kind other */
  --fade-page-dark: linear-gradient(to bottom, rgba(18, 18, 17, 0), var(--graphite-900)); /* @kind other */

  /* Blur is used only for the sticky nav bar. */
  --blur-nav: saturate(140%) blur(20px); /* @kind other */
}