/* ============================================================
   Smarterix — Effects: shadow, motion, the signature bar
   Restrained, soft shadows on a slate hue. Quick, eased motion.
   ============================================================ */
:root {
  /* --- Shadows (slate-tinted, soft) -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(35, 38, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(35, 38, 43, 0.08), 0 1px 2px rgba(35, 38, 43, 0.05);
  --shadow-md: 0 4px 12px rgba(35, 38, 43, 0.08), 0 2px 4px rgba(35, 38, 43, 0.05);
  --shadow-lg: 0 12px 28px rgba(35, 38, 43, 0.10), 0 4px 10px rgba(35, 38, 43, 0.05);
  --shadow-xl: 0 24px 48px rgba(35, 38, 43, 0.14);
  --shadow-focus: var(--ring);

  /* --- 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:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --transition: var(--dur-base) var(--ease-out);

  /* --- The signature bar (red·yellow·blue·green) ------------------- */
  --signature-bar: linear-gradient(90deg,
    var(--sx-red)    0%,  var(--sx-red)    25%,
    var(--sx-yellow) 25%, var(--sx-yellow) 50%,
    var(--sx-blue)   50%, var(--sx-blue)   75%,
    var(--sx-green)  75%, var(--sx-green)  100%);
  --signature-bar-height: 4px;
}

/* Reusable signature underline element */
.sx-signature-bar {
  height: var(--signature-bar-height);
  background: var(--signature-bar);
  border-radius: var(--radius-pill);
  width: 100%;
}