/* ============================================================
   Sabatak — Effects: radius, shadow, gradients, motion
   ============================================================ */

:root {
  /* ---- Border radius ---- */
  --radius-0:    0;        /* text/color styles use sharp corners */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --radius-card: 55px;     /* signature pricing-card radius */

  /* ---- Borders ---- */
  --border-width: 1px;  /* @kind other */

  /* ---- Shadows ----
     "Realistic" drop shadow: outside, black @10%, X:0 Y:20,
     diffusion 0.5, focus 0.25 — modeled as a layered soft shadow. */
  --shadow-realistic:
      0 20px 40px -8px rgba(0, 0, 0, 0.10),
      0 8px 16px -6px rgba(0, 0, 0, 0.08);
  --shadow-sm:
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:
      0 4px 12px -2px rgba(0, 0, 0, 0.10),
      0 2px 6px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:
      0 24px 48px -12px rgba(0, 0, 0, 0.18),
      0 8px 20px -8px rgba(0, 0, 0, 0.10);

  /* ---- Signature pricing-card gradient ----
     Near-opaque black bleeding into a semi-transparent warm-brown
     glow from the lower edge. */
  --gradient-pricing:
      linear-gradient(157deg,
        rgba(0, 0, 0, 0.99) 47%,
        rgba(184, 133, 86, 0.34) 100%);  /* @kind color */
  --gradient-hero:
      linear-gradient(160deg, #9A6F3F 0%, #8A6338 55%, #6E4E32 100%);  /* @kind color */
  --gradient-depth:
      linear-gradient(160deg, #3A3148 0%, #312A3D 60%, #211C29 100%);  /* @kind color */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
}