/* ============================================================
   Strivetech AI — Elevation, motion, blur tokens
   On a near-black canvas, depth comes from hairline borders +
   very subtle shadows, not heavy drop-shadows. Mint glow is
   reserved for the single most important live/active element.
   ============================================================ */
:root {
  /* ---- Shadows (low-opacity, large, soft — felt not seen) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, 0.7);

  /* Inset hairline that reads as a crisp top-edge highlight on cards */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);  /* @kind shadow */

  /* ---- Mint glow — sparing, for the one "live" element ---- */
  --glow-accent: 0 0 0 1px var(--accent-line), 0 0 24px -4px rgba(182, 240, 200, 0.35);
  --glow-accent-soft: 0 0 32px -8px rgba(182, 240, 200, 0.28);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ring);

  /* ---- Blur (glass overlays, sticky headers) ---- */
  --blur-sm: 6px;    /* @kind other */
  --blur-md: 14px;   /* @kind other */
  --blur-lg: 24px;   /* @kind other */
  --scrim: rgba(6, 6, 7, 0.72);          /* dialog backdrop */
  --glass: rgba(10, 10, 12, 0.66);       /* sticky header fill */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 120ms;     /* @kind other */
  --dur-base: 200ms;     /* @kind other */
  --dur-slow: 360ms;     /* @kind other */
  --dur-slower: 600ms;   /* @kind other */
}