/* Graviro surfaces, elevation and motion. Depth is made of light: a top sheen, a soft
   ambient shadow, and — on the accent only — a low glow. Visible 1px outlines are not
   the system's border style; they appear only as part of an elevation recipe. */
:root {
  /* --- Radii: soft, consistent, never sharp --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Elevation recipes (sheen + ambient shadow) --- */
  --e-flat: inset 0 1px 0 var(--sheen-soft);
  --e-1: inset 0 1px 0 var(--sheen-top), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  --e-2: inset 0 1px 0 var(--sheen-top), 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 48px -22px rgba(0, 0, 0, 0.9);
  --e-3: inset 0 1px 0 var(--sheen-top), 0 4px 12px rgba(0, 0, 0, 0.5), 0 44px 90px -30px rgba(0, 0, 0, 0.95);
  --e-glow: inset 0 1px 0 var(--sheen-top), 0 0 0 1px var(--moss-edge), 0 16px 44px -18px rgba(140, 164, 140, 0.42);

  /* --- Surface sheens, laid over a panel colour --- */
  --sheen-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 46%); /* @kind other */
  --sheen-hero: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 60%); /* @kind other */
  --sheen-accent: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%); /* @kind other */
  --scrim-top: linear-gradient(to bottom, rgba(8, 9, 12, 0.9), rgba(8, 9, 12, 0)); /* @kind other */
  --scrim-bottom: linear-gradient(to top, rgba(8, 9, 12, 0.92), rgba(8, 9, 12, 0)); /* @kind other */

  /* --- Motion --- */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 200ms; /* @kind other */
  --dur-3: 340ms; /* @kind other */
  --dur-4: 620ms; /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1); /* @kind other */
  --rise: 14px;
  --press: 0.97; /* @kind other */

  /* --- Blur --- */
  --blur-chrome: 18px; /* @kind other */
  --blur-overlay: 30px; /* @kind other */

  /* --- Texture, from the supplied brand board --- */
  --texture-slate: url("../assets/texture-slate.png"); /* @kind other */
  --grain: 0.05; /* @kind other */
}