/* ============ EFFECTS — radius, border, shadow, texture, motion ============ */
:root {
  /* --- corner radius (everything is soft; nothing is a hard rectangle) --- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-card: 18px;
  --r-pill: 999px;

  /* --- borders (thin, dark, confident) --- */
  --bw:       1.5px;
  --bw-thick: 2px;
  --border-line: var(--bw) solid var(--border);

  /* --- shadows --- */
  /* soft ambient lift for cards & stickers (warm-tinted, never gray) */
  --shadow-sm:   0 2px 6px rgba(120,90,60,.10);
  --shadow-card: 0 12px 26px rgba(120,90,60,.14);
  --shadow-float:0 10px 22px rgba(120,90,60,.18);  /* floating stickers/moodboard */
  /* hard offset "sticker" shadow for pressable pills & buttons */
  --shadow-pop:  2px 2px 0 var(--ink);
  --shadow-pop-lg: 3px 3px 0 var(--ink);

  /* --- graph-paper background (compose onto --bg) --- */
  --grid-size: 26px;
  --paper: linear-gradient(var(--grid-line) 1px, transparent 1px),
           linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

  /* --- motion --- */
  --ease-soft:   cubic-bezier(.22,.61,.36,1);   /* @kind other */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);  /* @kind other */
  --dur-fast:  140ms; /* @kind other */
  --dur:       260ms; /* @kind other */
  --dur-slow:  520ms; /* @kind other */

  --cursor-heart: pointer;  /* @kind other */
}

@keyframes dux-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dux-float { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-9px) rotate(var(--rot,0deg)); } }

/* Reusable graph-paper surface helper (used by page backgrounds & cards). */
.dux-paper {
  background-color: var(--bg);
  background-image: var(--paper);
  background-size: var(--grid-size) var(--grid-size);
}