/* ===========================================================================
   RD8 — Radii, borders, shadows, gradients & motion
   ---------------------------------------------------------------------------
   The RD8 surface look: charcoal panels lit by a faint top-down gradient,
   a 1px #222 hairline, occasional inset bottom shadow for "machined" depth,
   and the signature green glow on hero media. Corners are modest on UI
   (.375–.5rem) and generous on media (20px). Motion is smooth and unhurried
   (all .4s) with a subtle 1.02 hover scale.
   =========================================================================== */

:root {
  /* --- Radii ------------------------------------------------------------ */
  --radius-xs: 0.125rem;   /* tags inside dense tables                     */
  --radius-sm: 0.375rem;   /* buttons, inputs                             */
  --radius-md: 0.5rem;     /* tags, chips, small cards                    */
  --radius-lg: 0.75rem;    /* cards                                       */
  --radius-xl: 1rem;       /* feature cards                               */
  --radius-2xl: 20px;      /* hero media, large panels                    */
  --radius-pill: 6.25rem;  /* pills / avatars                             */
  --radius-full: 50%;

  /* --- Border widths ---------------------------------------------------- */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* --- Surface gradients (charcoal "lit panel" look) -------------------- */
  --surface-gradient-card: linear-gradient(180deg, #282828, #212121);
  --surface-gradient-panel: linear-gradient(180deg, #1c1c1c, #121212);
  --surface-gradient-deep: linear-gradient(180deg, #111111, #080808);
  --surface-gradient-button-dark: linear-gradient(180deg, #222222, #101010);

  /* --- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-inset-machined: inset 0 -2px 2px rgba(0, 0, 0, 0.4);  /* button depth */

  /* --- Green glow (hero media, key CTAs) -------------------------------- */
  --glow-green-soft: 0 12px 80px rgba(54, 235, 8, 0.25);
  --glow-green: 0 24px 200px rgba(54, 235, 8, 0.4);

  /* --- Edge-fade overlays (marquees, scroll regions) -------------------- */
  --fade-left: linear-gradient(90deg, #08090b, rgba(10, 13, 18, 0));  /* @kind other */
  --fade-right: linear-gradient(90deg, rgba(10, 13, 18, 0), #08090b); /* @kind other */

  /* --- Motion ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --duration-fast: 0.2s;       /* @kind other */
  --duration: 0.4s;            /* @kind other */
  --hover-lift: scale(1.02);   /* @kind other */
}