/* ============================================================
   NUMA — Effects: shadows, blur, motion, focus
   Shadows are violet-tinted (cast in ink-violet, never pure black)
   and restrained — elevation by softness, not darkness.
   ============================================================ */

:root {
  /* Elevation — warm, layered, low-contrast */
  --shadow-xs:  0 1px 2px color-mix(in oklab, var(--ink-900) 7%, transparent);
  --shadow-sm:  0 1px 2px color-mix(in oklab, var(--ink-900) 6%, transparent),
                0 2px 6px color-mix(in oklab, var(--ink-900) 6%, transparent);
  --shadow-md:  0 2px 4px color-mix(in oklab, var(--ink-900) 5%, transparent),
                0 8px 20px color-mix(in oklab, var(--ink-900) 8%, transparent);
  --shadow-lg:  0 4px 8px color-mix(in oklab, var(--ink-900) 6%, transparent),
                0 18px 44px color-mix(in oklab, var(--ink-900) 11%, transparent);
  --shadow-xl:  0 8px 16px color-mix(in oklab, var(--ink-900) 7%, transparent),
                0 36px 80px color-mix(in oklab, var(--ink-900) 14%, transparent);

  /* Inset / wells */
  --shadow-inset: inset 0 1px 2px color-mix(in oklab, var(--ink-900) 8%, transparent);

  /* Brand glow (focus, active product states) — subtle */
  --glow-brand: 0 0 0 4px var(--focus-ring);

  /* Blur (glass surfaces over imagery) */
  --blur-sm: 6px;   /* @kind other */
  --blur-md: 14px;  /* @kind other */
  --blur-lg: 28px;  /* @kind other */

  /* Motion — quick, confident, gentle ease. No bounces. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */

  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   380ms;  /* @kind other */

  --t-fast:   var(--dur-fast) var(--ease-out);   /* @kind other */
  --t-base:   var(--dur-base) var(--ease-out);   /* @kind other */
  --t-slow:   var(--dur-slow) var(--ease-out);   /* @kind other */

  /* Focus ring */
  --focus-width: 3px;  /* @kind spacing */
  --ring: 0 0 0 var(--focus-width) var(--focus-ring);

  /* Texture overlay opacity (subtle paper grain on dark sections) */
  --grain-opacity: 0.05;  /* @kind other */
}