/* ============================================================
   Liquid Glass tokens, shared by every page (loaded before the page's own stylesheet).
   A surface is a translucent fill with a bright specular edge, a thin rim light and a blur
   that saturates whatever sits behind it. Page stylesheets apply these in their own
   "Liquid Glass" section at the end.
   ============================================================ */
:root {
  --sans: -apple-system, "SF Pro Text", "SF Pro Display", "Inter", BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: -apple-system, "SF Pro Display", "Inter", BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --lg-sheen: radial-gradient(130% 60% at 50% -14%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%);
  /* Light glass for controls and pills; strong glass (a darker base) for text-heavy surfaces. */
  --lg-fill: var(--lg-sheen), linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.1)), rgba(10, 16, 36, 0.42);
  --lg-fill-strong: var(--lg-sheen), linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.08)), rgba(8, 13, 30, 0.8);
  --lg-filter: blur(22px) saturate(1.9) brightness(1.08);
  --lg-edge: inset 0 1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12), inset 1.5px 0 1px rgba(255, 255, 255, 0.16), inset -1.5px 0 1px rgba(255, 255, 255, 0.16);
  --lg-shadow: var(--lg-edge), 0 14px 44px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.2);
  --lg-rim: linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0.4));

  /* Glass sunk into a surface: inputs and nested cards. */
  --lg-inset: rgba(255, 255, 255, 0.07);
  --lg-inset-edge: inset 0 1px 1px rgba(255, 255, 255, 0.2);
  --lg-field: rgba(0, 0, 0, 0.22);
  --lg-field-edge: inset 0 2px 5px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.12);
  --lg-line: rgba(255, 255, 255, 0.16);

  /* Selected or primary: tinted glass. */
  --lg-tint: linear-gradient(180deg, rgba(100, 180, 255, 0.95), rgba(10, 120, 255, 0.82));
  --lg-tint-edge: inset 0 1.5px 1px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 60, 170, 0.35), 0 8px 22px rgba(10, 110, 255, 0.45);
  --lg-tint-soft: linear-gradient(135deg, rgba(100, 180, 255, 0.34), rgba(100, 180, 255, 0.12));
  --lg-tint-soft-edge: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(108, 182, 255, 0.18);
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Browsers without backdrop-filter get a more solid fill so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --lg-fill: linear-gradient(135deg, rgba(40, 52, 88, 0.92), rgba(18, 26, 52, 0.92));
    --lg-fill-strong: linear-gradient(135deg, rgba(40, 52, 88, 0.96), rgba(18, 26, 52, 0.96));
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-fill: linear-gradient(135deg, rgba(40, 52, 88, 0.96), rgba(18, 26, 52, 0.96));
    --lg-fill-strong: linear-gradient(135deg, rgba(40, 52, 88, 0.98), rgba(18, 26, 52, 0.98));
    --lg-filter: none;
  }
}