/* ============================================================
   EFFECTS — shadows, glass, blur, motion
   The portal's signature is "liquid glass": translucent pills
   over a blurred backdrop that INVERT to a luminous blue
   gradient on hover (the "Julianus rollover"). Shadows are
   soft and low; nothing is heavy.
   ============================================================ */

:root {
  /* ---- Elevation (soft, finance-grade) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* ---- Glass system (secondary pills, nav, segmented control) ---- */
  --v2-glass-bg: rgba(255, 255, 255, 0.22);
  --v2-glass-border: rgba(11, 24, 71, 0.10);
  --v2-glass-shadow: 0 4px 14px rgba(11, 24, 71, 0.10), inset 0 0 14px -3px rgba(255, 255, 255, 0.85);
  --glass-blur: blur(12px) saturate(1.4);       /* @kind other */
  --glass-blur-menu: blur(14px) saturate(1.25); /* @kind other */

  /* ---- Primary pill (solid brand-blue at rest) ---- */
  --v2-primary-ink: #ffffff;
  --v2-primary-bg: var(--oa-brand-blue);
  --v2-primary-border: var(--oa-brand-blue);
  --v2-primary-shadow: 0 8px 22px rgba(0, 88, 255, 0.30), 0 3px 10px rgba(11, 24, 71, 0.10);

  /* ---- Pearl pill (blue-outline glass) ---- */
  --v2-pearl-ink: var(--oa-brand-blue);
  --v2-pearl-border: rgba(0, 88, 255, 0.55);

  /* ---- Menu / popover surface ---- */
  --v2-menu-bg: rgba(255, 255, 255, 0.82);
  --v2-menu-shadow: 0 14px 36px rgba(11, 24, 71, 0.16);

  /* ---- The Julianus rollover (hover fill — theme-CONSTANT) ----
     Every primary & glass pill flips to this luminous blue
     gradient + white ink + glow on hover. Identical in both themes. */
  --v2-hover-fill: linear-gradient(180deg, #4d80ff 0%, #1e5bff 100%);
  --v2-hover-glow: 0 0 0 1px rgba(0, 88, 255, 0.22), 0 10px 30px rgba(0, 88, 255, 0.42), 0 2px 8px rgba(11, 24, 71, 0.10);
  --v2-active-fill: linear-gradient(180deg, #5b8cff 0%, #2d66ff 100%);
  --v2-active-glow: 0 0 0 1px rgba(0, 88, 255, 0.32), 0 0 22px rgba(64, 118, 255, 0.55), 0 8px 24px rgba(0, 88, 255, 0.40);

  /* ---- Focus ring ---- */
  --focus-ring: 2px solid rgba(0, 88, 255, 0.55); /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.3, 1, 0.5, 1); /* @kind other */
  --t-fast: 140ms; /* @kind other */
  --t-med: 200ms;  /* @kind other */
  --t-slow: 220ms; /* @kind other */
}