/* ============================================================
   NEXHA HAIRTECH — EFFECTS: SHADOW, BLUR, MOTION
   Restraint over flourish. Shadows are tight and neutral.
   Motion is fast, linear-leaning and decisive — no bounce.
   ============================================================ */

:root {
  /* --- Elevation (neutral, low-spread) --- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(5,5,6,0.06);
  --shadow-sm: 0 1px 3px rgba(5,5,6,0.08), 0 1px 2px rgba(5,5,6,0.05);
  --shadow-md: 0 4px 12px rgba(5,5,6,0.10), 0 1px 3px rgba(5,5,6,0.06);
  --shadow-lg: 0 12px 32px rgba(5,5,6,0.14), 0 2px 8px rgba(5,5,6,0.08);
  --shadow-xl: 0 24px 64px rgba(5,5,6,0.22);

  /* On dark surfaces, lean on borders + a faint top highlight */
  --hairline-top: inset 0 1px 0 rgba(255,255,255,0.06); /* @kind shadow */

  /* --- Frosted layers --- */
  --blur-sm: blur(6px); /* @kind other */
  --blur-md: blur(14px); /* @kind other */
  --blur-lg: blur(28px); /* @kind other */
  --glass-light: rgba(255,255,255,0.72); /* @kind color */
  --glass-dark:  rgba(10,10,11,0.55); /* @kind color */

  /* --- Focus --- */
  --focus-width: 2px; /* @kind other */
  --focus-offset: 2px; /* @kind other */
  --focus-shadow: 0 0 0 var(--focus-offset) var(--bg-canvas), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring); /* @kind shadow */

  /* --- Motion: durations --- */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-slower:  560ms; /* @kind other */

  /* --- Motion: easing — engineered, decisive --- */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.9, 0.2); /* @kind other */
  --ease-sharp:    cubic-bezier(0.7, 0, 0.3, 1); /* @kind other */

  --t-color:   color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --t-transform: transform var(--dur-base) var(--ease-out); /* @kind other */
}