/* ============================================================
   CryptoCalcy — Elevation (shadows) & Motion
   Philosophy: flat surfaces, color-block separation.
   Shadows are soft and cool-tinted, used sparingly — depth
   comes mostly from surface-step contrast, not drop shadows.
   ============================================================ */

:root {
  /* ---------- Elevation / shadows ---------- */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(8, 10, 16, 0.24);
  --shadow-sm:  0 2px 6px rgba(8, 10, 16, 0.28);
  --shadow-md:  0 8px 20px rgba(8, 10, 16, 0.34);
  --shadow-lg:  0 16px 40px rgba(8, 10, 16, 0.42);
  --shadow-xl:  0 28px 68px rgba(8, 10, 16, 0.52);

  /* Brand glow — for hero focal CTAs only, use sparingly */
  --shadow-brand: 0 8px 28px color-mix(in srgb, var(--violet-500) 42%, transparent);

  /* Inset — inputs / sunken wells */
  --shadow-inset: inset 0 1px 2px rgba(8, 10, 16, 0.4);

  /* ---------- Motion — durations ---------- */
  --duration-instant: 80ms; /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    320ms; /* @kind other */
  --duration-slower:  480ms; /* @kind other */

  /* ---------- Motion — easings ---------- */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1); /* @kind other */      /* most UI transitions */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* @kind other */       /* enters */
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* @kind other */     /* exits */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* @kind other */   /* subtle overshoot */
  --ease-linear:    linear; /* @kind other */                          /* progress, spinners */

  /* ---------- Common transition shorthands ---------- */
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-standard);
  --transition-opacity: opacity var(--duration-base) var(--ease-standard);
}

/* Light theme softens shadows (cool near-black tint too heavy on white) */
[data-theme="light"] {
  --shadow-xs:  0 1px 2px rgba(18, 20, 28, 0.06);
  --shadow-sm:  0 2px 6px rgba(18, 20, 28, 0.08);
  --shadow-md:  0 8px 20px rgba(18, 20, 28, 0.10);
  --shadow-lg:  0 16px 40px rgba(18, 20, 28, 0.12);
  --shadow-xl:  0 28px 68px rgba(18, 20, 28, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(18, 20, 28, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast:    0ms; /* @kind other */
    --duration-base:    0ms; /* @kind other */
    --duration-slow:    0ms; /* @kind other */
    --duration-slower:  0ms; /* @kind other */
  }
}