/* ─── SHARED VISUAL TOKENS ───────────────────────────────────────────────
   Page colors stay defined locally (each page's own :root) — this file only
   holds the things that should look and feel identical everywhere: shadow
   depth, corner radius and motion easing. Centralizing these means a card
   or button style can't quietly drift out of sync between pages the way
   the public calculator once drifted from the members one.

   Design direction: soft, neutral, low-opacity ambient shadows for depth
   (not colour glow on every bordered element), one consistent radius scale,
   and one easing curve for hover motion, used everywhere instead of the
   browser default per rule. Accent-colour glow is kept, but reserved for
   primary call-to-action buttons only, so it reads as an intentional
   highlight rather than every element trying to shine at once.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.22);
  --shadow-md: 0 14px 34px rgba(0,0,0,0.32);
  --shadow-lg: 0 28px 64px rgba(0,0,0,0.45);

  --glow-accent: 0 10px 26px rgba(63,208,230,0.20);
  --glow-accent-hover: 0 16px 38px rgba(63,208,230,0.30);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* Primary CTA — solid accent fill, the one place a colour glow is used */
.btn-glow-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn-glow-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-accent-hover);
  opacity: 0.97;
}

/* Secondary CTA — outline, no glow, fills solid on hover */
.btn-glow-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-radius: var(--radius-pill);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-glow-outline:hover {
  transform: translateY(-2px);
}

/* Any card that should lift on hover — neutral ambient shadow, no colour glow */
.card-lift {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}