:root {
  /* Radii — hairline chips through the big LUX panel curve */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-2xl: 64px;
  --radius-pill: 999px;

  /* Borders — hairlines do nearly all the structural work */
  --border-hair: 1px solid var(--line-hairline);   /* @kind other */
  --border-strong: 1px solid var(--line-strong);   /* @kind other */
  --border-thick: 2px solid var(--line-strong);    /* @kind other */

  /* Shadows — used almost only to lift a device/panel off the page.
     Never on inline UI; buttons and cards are flat. */
  --shadow-none: none;
  --shadow-panel: 0 24px 60px -20px rgba(10,10,10,.28);
  --shadow-float: 0 40px 120px -32px rgba(10,10,10,.34);

  /* Scrim for type over photography */
  --scrim-hero: linear-gradient(180deg, var(--scrim-top) 0%, rgba(0,0,0,.18) 42%, var(--scrim-bottom) 100%); /* @kind other */
  --scrim-bottom-up: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);                          /* @kind other */

  /* Grain — the LUX signature. Applied as an overlay layer at low opacity. */
  --grain-url: url("../assets/grain.svg"); /* @kind other */
  --grain-opacity: 0.28;                   /* @kind other */
  --grain-opacity-strong: 0.5;             /* @kind other */

  /* Blur — glass only over imagery, never over flat paper */
  --blur-glass: saturate(120%) blur(14px);  /* @kind other */
  --blur-heavy: saturate(110%) blur(28px);  /* @kind other */
}