/* ==========================================================================
   SHADOWS & SURFACE TREATMENTS — the skeuomorphic half of the system.
   Every tactile control combines: an OUTER elevation shadow, an inner
   top highlight + bottom shadow bevel (the "plate" edge), and a subtle
   surface gradient reading as machined/glossy metal. Pressed states swap
   outer shadow for an inset shadow so the plate reads as pushed in.
   ========================================================================== */

:root {
  /* outer elevation (drop shadows) */
  --shadow-sm: 0 1px 2px rgba(7,15,25,0.10), 0 1px 1px rgba(7,15,25,0.06);
  --shadow-md: 0 2px 6px rgba(7,15,25,0.14), 0 1px 2px rgba(7,15,25,0.08);
  --shadow-lg: 0 8px 24px rgba(7,15,25,0.18), 0 2px 6px rgba(7,15,25,0.10);
  --shadow-xl: 0 20px 48px rgba(7,15,25,0.24), 0 6px 12px rgba(7,15,25,0.12);

  /* soft neumorphic elevation — taller lift, wide diffuse blur + top-left light */
  --shadow-soft: 8px 10px 24px rgba(7,15,25,0.16), -6px -6px 18px rgba(255,255,255,0.7);
  --shadow-soft-dark: 8px 10px 24px rgba(0,0,0,0.5), -6px -6px 18px rgba(255,255,255,0.04);

  /* inset / pressed */
  --shadow-inset-sm: inset 0 1px 2px rgba(7,15,25,0.25), inset 0 -1px 0 rgba(255,255,255,0.4);
  --shadow-inset-md: inset 0 2px 5px rgba(7,15,25,0.30), inset 0 -1px 0 rgba(255,255,255,0.3); /* @kind shadow */

  /* bevel: 1px duotone border simulating a machined plate edge */
  --bevel-border: 1px solid var(--bevel-highlight);
  --bevel-shadow-edge: 0 1px 0 var(--bevel-shadow);

  /* glossy top highlight overlay for raised controls (use as background-image) */
  --gradient-gloss: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 55%); /* @kind other */
  --gradient-gloss-dark: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0) 55%); /* @kind other */

  /* brushed metal surface gradient for larger raised panels */
  --gradient-plate: linear-gradient(180deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
  --gradient-plate-dark: linear-gradient(180deg, var(--neutral-800) 0%, var(--neutral-850) 100%);

  /* recessed/sunken well gradient, for inputs and inset panels */
  --gradient-well: linear-gradient(180deg, var(--neutral-150) 0%, var(--neutral-100) 100%);
  --gradient-well-dark: linear-gradient(180deg, var(--neutral-1000) 0%, var(--neutral-950) 100%);

  --focus-ring-shadow: 0 0 0 3px color-mix(in oklch, var(--focus-ring) 45%, transparent);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 100ms; /* @kind other */
  --duration-normal: 160ms; /* @kind other */
}