/* ============================================================
   TRESIPUNT — ELEVATION, SHADOWS, MOTION
   Soft, low-contrast shadows. Calm, quick easing.
   ============================================================ */
:root {
  /* Shadows — soft & diffuse, neutral (never colored except brand glow) */
  --shadow-xs: 0 1px 2px rgba(30, 30, 31, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 30, 31, 0.07);
  --shadow-md: 0 6px 18px rgba(30, 30, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(30, 30, 31, 0.10);
  --shadow-xl: 0 28px 64px rgba(30, 30, 31, 0.14);

  /* Brand glow — used sparingly on primary CTAs in hover/focus */
  --shadow-brand: 0 8px 24px rgba(248, 64, 21, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* Reusable transition shorthand for interactive controls */
  --transition-control: background-color var(--dur-fast) var(--ease-standard),
                         color var(--dur-fast) var(--ease-standard),
                         border-color var(--dur-fast) var(--ease-standard),
                         box-shadow var(--dur-base) var(--ease-out),
                         transform var(--dur-fast) var(--ease-out); /* @kind other */
}