/* ============================================================
   SHADOWS, ELEVATION & GLASS — DesignCode UI "Astrolog"
   ------------------------------------------------------------
   "The glass absorbs the colors and the shadows elevate."
   Shadows are layered and soft (multiple low-opacity black
   stacks) with a 1px inset highlight on top. Glass surfaces add
   a top-down white gradient + backdrop-blur over those shadows.
   ============================================================ */

:root {
  /* ---- Elevation: layered soft shadows ---- */
  --shadow-1:
    0px 1px 0px 0px rgba(0, 0, 0, 0.05),
    0px 4px 4px 0px rgba(0, 0, 0, 0.05),
    0px 10px 10px 0px rgba(0, 0, 0, 0.1);

  --shadow-2:
    0px 2px 4px 0px rgba(0, 0, 0, 0.05),
    0px 8px 16px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.08);

  --shadow-3:
    0px 3px 6px 0px rgba(0, 0, 0, 0.05),
    0px 10px 20px 0px rgba(0, 0, 0, 0.05),
    0px 30px 30px 0px rgba(0, 0, 0, 0.1);

  --shadow-4:
    0px 5px 10px 0px rgba(0, 0, 0, 0.05),
    0px 15px 30px 0px rgba(0, 0, 0, 0.05),
    0px 30px 60px 0px rgba(0, 0, 0, 0.1);

  /* 1px inset highlight that rides on glass surfaces */
  --highlight-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --highlight-inset-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* ---- Glass composite shadows (highlight + elevation) ---- */
  --shadow-glass-sm:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0px 1px 0px 0px rgba(0, 0, 0, 0.05),
    0px 4px 4px 0px rgba(0, 0, 0, 0.05),
    0px 10px 10px 0px rgba(0, 0, 0, 0.1);

  --shadow-glass:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0px 3px 6px 0px rgba(0, 0, 0, 0.05),
    0px 10px 20px 0px rgba(0, 0, 0, 0.05),
    0px 30px 30px 0px rgba(0, 0, 0, 0.1);

  --shadow-glass-lg:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0px 5px 10px 0px rgba(0, 0, 0, 0.05),
    0px 15px 30px 0px rgba(0, 0, 0, 0.05),
    0px 30px 60px 0px rgba(0, 0, 0, 0.1);

  /* ---- Inner shadow (used for wells / pressed states) ---- */
  --shadow-inner: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --shadow-inner-strong: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.25);

  /* ---- Glow (color light buttons) ---- */
  --glow-blue: 0px 4px 16px 0px rgba(0, 122, 255, 0.5);
  --glow-purple: 0px 4px 16px 0px rgba(175, 82, 222, 0.45);

  /* ---- Glass surface fills + blur ---- */
  --glass-gradient: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 100%) /* @kind other */;
  --glass-gradient-strong: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%) /* @kind other */;
  --blur-sm: blur(10px); /* @kind other */
  --blur-md: blur(20px); /* @kind other */
  --blur-lg: blur(40px); /* @kind other */
}

/* In dark mode the glass gradient inverts to a faint white wash
   over dark surfaces, and the inset highlight strengthens. */
:root[data-theme="dark"],
.dark {
  --glass-gradient: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%); /* @kind other */
  --glass-gradient-strong: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%); /* @kind other */
  --shadow-inner: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
}