/* ===========================================================================
   LinkUp — "Liquid Glass" material tokens
   Translucent, blurred floating surfaces (bottom nav, top-bar controls, FAB).
   Soft inner rim highlights + quiet top sheen. Restrained, Apple-like — no
   heavy glows. Light = quiet white glass; dark = quiet graphite glass.
   Apply with: background: var(--lg-bg); backdrop-filter: var(--lg-blur);
   plus the rim/sheen box-shadows in .lg-capsule (see components / cards).
   =========================================================================== */

:root {
  --lg-blur: blur(20px) saturate(135%); /* @kind other */
  --lg-blur-control: blur(18px) saturate(135%); /* @kind other */

  /* Capsule (bottom nav, top-bar control) */
  --lg-bg: hsla(0, 0%, 100%, 0.5);
  --lg-rim-top: rgba(255, 255, 255, 0.55);
  --lg-rim-bottom: rgba(0, 0, 0, 0.08);
  --lg-edge: rgba(255, 255, 255, 0.45);
  --lg-sheen: rgba(255, 255, 255, 0.30);
  --lg-shadow: rgba(0, 0, 0, 0.08);

  /* Active sliding pill (inside nav capsule) */
  --lg-pill-bg: hsla(0, 0%, 100%, 0.70);
  --lg-pill-rim: rgba(255, 255, 255, 0.80);
  --lg-pill-sheen: rgba(255, 255, 255, 0.45);
  --lg-pill-shadow: rgba(0, 0, 0, 0.05);

  /* FAB rim */
  --lg-fab-rim: rgba(255, 255, 255, 0.22);
  --lg-fab-shadow: rgba(0, 0, 0, 0.16);
}

.dark {
  --lg-bg: rgba(38, 38, 42, 0.5);
  --lg-rim-top: rgba(255, 255, 255, 0.14);
  --lg-rim-bottom: rgba(0, 0, 0, 0.25);
  --lg-edge: rgba(255, 255, 255, 0.10);
  --lg-sheen: rgba(255, 255, 255, 0.06);
  --lg-shadow: rgba(0, 0, 0, 0.32);

  --lg-pill-bg: rgba(255, 255, 255, 0.16);
  --lg-pill-rim: rgba(255, 255, 255, 0.28);
  --lg-pill-sheen: rgba(255, 255, 255, 0.16);
  --lg-pill-shadow: rgba(0, 0, 0, 0.25);

  --lg-fab-rim: rgba(255, 255, 255, 0.85);
  --lg-fab-shadow: rgba(0, 0, 0, 0.32);
}

/* ---- Reusable glass surface helpers (optional; components can also inline) ---- */
.lg-capsule {
  position: relative;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow:
    inset 0 1px 0.5px var(--lg-rim-top),
    inset 0 -1px 1px var(--lg-rim-bottom),
    inset 0 0 0 0.5px var(--lg-edge),
    0 6px 16px var(--lg-shadow);
}
.lg-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--lg-sheen) 0%, transparent 55%);
  pointer-events: none;
}
.lg-control {
  position: relative;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur-control);
  backdrop-filter: var(--lg-blur-control);
  box-shadow:
    inset 0 1px 0.5px var(--lg-rim-top),
    inset 0 -1px 1px var(--lg-rim-bottom),
    inset 0 0 0 0.5px var(--lg-edge),
    0 4px 12px var(--lg-shadow);
}
.lg-pill {
  background: var(--lg-pill-bg);
  box-shadow:
    inset 0 1px 0.5px var(--lg-pill-rim),
    0 4px 12px var(--lg-pill-shadow);
}
.lg-fab {
  box-shadow:
    0 5px 14px var(--lg-fab-shadow),
    inset 0 1px 0.5px var(--lg-fab-rim);
}