/* ============================================================
   Elevation, motion, backgrounds (DESIGN.md §6, §7, §10)
   Shadows are subtle. Cards mostly e2, raised e3. glow = focus only.
   ============================================================ */
:root {
  /* ---- Elevation ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(13,21,53,.06), 0 1px 3px rgba(13,21,53,.08);
  --elev-2: 0 4px 12px rgba(13,21,53,.08), 0 2px 4px rgba(13,21,53,.06);
  --elev-3: 0 12px 32px rgba(13,21,53,.12), 0 4px 12px rgba(13,21,53,.08);
  --elev-4: 0 24px 64px rgba(13,21,53,.18), 0 8px 24px rgba(13,21,53,.10);
  --glow:   0 0 0 1px rgba(53,164,217,.30), 0 8px 32px rgba(53,164,217,.25);

  /* ---- Motion ---- */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --ease-standard:   cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-accelerate: cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-decelerate: cubic-bezier(0,0,.2,1); /* @kind other */

  /* ---- "Data Flow" grid backgrounds ----
     Use as quiet carriers under content on the night-blue stage.
     Apply via background: var(--bg-grid-dark); on a dark surface. */
  --bg-grid-dark:
    linear-gradient(to right,  rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); /* @kind other */
  --bg-grid-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; /* @kind other */

  /* Light "Aurora" grid for light surfaces */
  --bg-grid-light:
    linear-gradient(to right,  rgba(53,164,217,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(53,164,217,0.10) 1px, transparent 1px); /* @kind other */
  --bg-grid-light-size: 40px 40px, 40px 40px; /* @kind other */

  /* Radial glow accents (place absolutely, low opacity) */
  --glow-sky:  radial-gradient(ellipse, rgba(53,164,217,0.25) 0%, transparent 65%); /* @kind other */
  --glow-teal: radial-gradient(ellipse, rgba(82,187,181,0.18) 0%, transparent 65%); /* @kind other */
}