/* ============================================================
   Sugar Gravel — Effects: shadows, motion, and the sugar-cube pattern
   The brand "Patern" is a subtly tiled 3-D sugar-cube outline laid over
   the flat brand colours. Reproduced here as a tiling SVG data-URI so it
   can be dropped onto any coloured band via --sg-pattern.
   ============================================================ */
:root {
  /* ---- Shadows (used sparingly — the brand is mostly flat) ---- */
  --shadow-card: 0 10px 30px rgba(28,28,28,.12);
  --shadow-pill: 0 6px 18px rgba(28,28,28,.16);
  --shadow-lift: 0 18px 48px rgba(28,28,28,.20);
  --shadow-none: none;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-soft:  cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Sugar-cube pattern tile (white outline @ low opacity) ---- */
  --sg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1.1'%3E%3Cpath d='M9 14 L18 9 L27 14 L27 24 L18 29 L9 24 Z'/%3E%3Cpath d='M9 14 L18 19 L27 14 M18 19 L18 29'/%3E%3Cpath d='M36 32 L45 27 L54 32 L54 42 L45 47 L36 42 Z'/%3E%3Cpath d='M36 32 L45 37 L54 32 M45 37 L45 47'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */

  /* Tinted variant for use on light surfaces (ink outline) */
  --sg-pattern-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%231c1c1c' stroke-opacity='0.08' stroke-width='1.1'%3E%3Cpath d='M9 14 L18 9 L27 14 L27 24 L18 29 L9 24 Z'/%3E%3Cpath d='M9 14 L18 19 L27 14 M18 19 L18 29'/%3E%3Cpath d='M36 32 L45 27 L54 32 L54 42 L45 47 L36 42 Z'/%3E%3Cpath d='M36 32 L45 37 L54 32 M45 37 L45 47'/%3E%3C/g%3E%3C/svg%3E"); /* @kind other */
}

/* Utility: drop the cube pattern onto any element */
.sg-pattern { background-image: var(--sg-pattern); background-size: 54px 54px; }