/* ============================================================
   SILIANA'S MUSIC STUDIO — SHAPE, SHADOW & MOTION TOKENS
   The brand shape language is SOFT: rounded 18px cards, full
   pill buttons, and the signature "arch" (flat bottom, rounded
   top) borrowed from the colour-swatch sheet. Shadows are low,
   warm and diffuse — never harsh. Motion is gentle.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-sm:   10px;
  --radius:      18px;   /* default card / input group radius */
  --radius-lg:   24px;   /* large panels, textareas           */
  --radius-pill: 999px;  /* buttons, chips, inputs            */
  --radius-arch: 110px 110px 14px 14px; /* brand "swatch arch" */

  /* ---- Shadows (warm, low, diffuse — built on ink) ---- */
  --shadow-xs:   0 1px 2px rgba(19, 31, 38, 0.06);
  --shadow-sm:   0 4px 14px rgba(19, 31, 38, 0.08);
  --shadow:      0 8px 28px rgba(19, 31, 38, 0.12);
  --shadow-lg:   0 8px 40px rgba(19, 31, 38, 0.10);
  --shadow-xl:   0 18px 60px rgba(19, 31, 38, 0.16);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hair:  1px solid var(--border-subtle);
  --accent-rule:  3px solid var(--accent); /* left-border on quotes/callouts */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --dur-fast:   0.18s; /* @kind other */
  --dur:        0.25s; /* @kind other */
  --dur-slow:   0.4s;  /* @kind other */
  --hover-lift: translateY(-4px); /* @kind other */ /* cards rise gently on hover */
  --press-lift: translateY(-1px); /* @kind other */ /* buttons nudge up on hover  */
}