/* Clay / Toy Box celebration tokens: the values telo-motion.css used to carry for everyone. Loaded by the Clay head
   (and by every design that declares it as its adapter). */
:root {
  --telo-gold: #FFC83D;
  --telo-gold-deep: oklch(62% 0.15 75);
  --telo-violet: #6D4AFF;
  --telo-violet-2: #8B5CF6;
  --telo-display: "Bricolage Grotesque", Vazirmatn, system-ui, sans-serif;
  --cel-cta-ink: #fff;
  --cel-x-hover-bg: #fff;
  --cel-backdrop: radial-gradient(circle at 50% 42%, rgb(139 92 246 / .34), rgb(20 14 60 / .72) 72%);
  --cel-card-shadow: 0 0 0 1px rgb(255 200 61 / .4), 0 0 70px -18px rgb(255 200 61 / .5), 0 40px 90px -30px rgb(30 14 90 / .75);
  --cel-stage-bg: #E9E4FF;
  --cel-glow: radial-gradient(circle, rgb(255 226 140 / .75), rgb(255 200 61 / .25) 38%, transparent 66%);
  --cel-amount-shadow: 0 0 0 1.5px rgb(255 200 61 / .75), 0 12px 30px -12px rgb(224 161 0 / .7);
  --cel-track: rgb(109 74 255 / .16);
  --cel-cta-shadow: 0 10px 24px -10px rgb(109 74 255 / .8), inset 0 1px 0 rgb(255 255 255 / .25);
  --cel-cta-shadow-hover: 0 14px 30px -10px rgb(109 74 255 / .9), inset 0 1px 0 rgb(255 255 255 / .25);
  --cel-x-bg: rgb(255 255 255 / .82);
  --cel-x-ink: #2a1f5c;
  --cel-x-shadow: 0 2px 8px rgb(40 20 80 / .2);
  --cel-spot-shadow: 0 0 0 1px rgb(255 200 61 / .45), 0 24px 50px -18px rgb(30 14 90 / .55);
  --cel-mote-bg: radial-gradient(circle, #fff 0 18%, #FFE08A 34%, rgb(255 200 61 / .55) 58%, transparent 72%);
  --cel-mote-shadow: 0 0 18px 6px rgb(255 200 61 / .45);
  --cel-first: #e8bc57;
  --cel-particles: #FFC83D | #FFE08A | #8B5CF6 | #6D4AFF | #B9A6FF | #FF9EC8;
}

/* The celebration and spotlight look of Clay / Toy Box, split out of telo-motion.css (structure and timing stay there).
   Selectors are unchanged; loaded after telo-motion.css by the design's own head. */

/* ---- Clay (editor): warm slab, a stacked counter ---- */
body[data-studio-look="clay"] .telo-cel__card{
  background:#f8efe5;color:#3a2b22;border-radius:34px;
  box-shadow:0 26px 50px -18px rgb(120 84 50 / .6), inset 0 4px 0 rgb(255 255 255 / .85), inset 0 -5px 0 rgb(150 105 70 / .16);
}

body[data-studio-look="clay"] .telo-cel__amount{background:#fffaf4;box-shadow:inset 0 3px 0 #fff, 0 10px 18px -8px rgb(120 84 50 / .5)}

body[data-studio-look="clay"] .telo-cel__num{color:#b9652f}

body[data-studio-look="clay"] .telo-cel__unit{color:#8c6bd9}

body[data-studio-look="clay"] .telo-cel__body{color:#75625a}

body[data-studio-look="clay"] .telo-cel__cta{background:#d98a55;box-shadow:inset 0 3px 0 rgb(255 255 255 / .45), 0 10px 18px -8px rgb(185 101 47 / .7)}

@media (prefers-reduced-motion:no-preference){
body[data-studio-look="clay"] .telo-cel[open] .telo-cel__amount{animation:telo-clay-drop .7s cubic-bezier(.2,.9,.3,1.25) .1s backwards}
@keyframes telo-clay-drop{from{transform:translateY(-30px) scale(1.2,.7);opacity:0} 60%{transform:translateY(3px) scale(.94,1.1)}}
}

@media (prefers-reduced-motion:no-preference){
body[data-studio-look="clay"] .telo-cel[data-telo-first][open] .telo-cel__stage::after{--telo-first:#d98a55}
}


/* ---- Page entrance (core/css/page_motion.css reads these): Clay's own values. Moved here from the shared sheet, which holds only the mechanics. ---- */
/* Clay: gentle depth, one small settle. */
[data-motion="clay"] { --pm-dur: 520ms; --pm-ease: cubic-bezier(.22, 1.15, .36, 1); --pm-y: 16px; --pm-scale: .96; --pm-step: 70ms; }