/* ============================================================
   FUSD — ELEVATION, GLOW, GRADIENTS, MOTION
   The brand is glow-forward: teal light blooms over deep ink.
   ============================================================ */
:root {
  /* Ambient shadows (depth on dark surfaces) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-raised: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 32px 90px rgba(0, 0, 0, 0.65);

  /* Signature teal glows — for primary CTAs, the logo, active states */
  --glow-teal-sm: 0 0 16px rgba(64, 162, 167, 0.35);
  --glow-teal-md: 0 0 28px rgba(64, 162, 167, 0.45);
  --glow-teal-lg: 0 0 56px rgba(64, 162, 167, 0.40);
  --glow-blue-md: 0 0 28px rgba(43, 95, 175, 0.45);

  /* Inset highlight — top edge sheen on raised surfaces */
  --inset-top: inset 0 1px 0 rgba(220, 231, 235, 0.06);

  /* Brand gradients (from the brand board) */
  --gradient-brand: linear-gradient(120deg, #40A2A7 0%, #2B5FAF 100%); /* @kind other */
  --gradient-deep: linear-gradient(140deg, #1A223B 0%, #25478B 100%); /* @kind other */
  --gradient-surface: linear-gradient(160deg, #1A223B 0%, #141C33 100%); /* @kind other */
  --gradient-horizon: radial-gradient(120% 90% at 50% 0%, rgba(64,162,167,0.18) 0%, rgba(43,95,175,0.06) 36%, transparent 70%); /* @kind other */
  --gradient-text: linear-gradient(100deg, #74D0D4 0%, #5C8AD6 100%); /* @kind other */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}