/* ============================================================
   10of10 · Effects — shadows, motion, borders, paper textures
   The brand's surfaces read as warm pressed paper: layered soft
   shadows, an inset top highlight, fine dot/halftone textures, and
   blurred warm glow orbs. Motion is expo-out for entrances, gentle
   spring (back) for tactile press/lift.
   ============================================================ */
:root {
  /* ---------- shadows ---------- */
  --shadow-glass:      0 4px 10px rgba(28,22,17,.03), 0 22px 46px -12px rgba(28,22,17,.14);
  --shadow-glass-soft: 0 2px 6px rgba(28,22,17,.03), 0 14px 30px -12px rgba(28,22,17,.10);
  --shadow-btn:        0 10px 24px rgba(22,17,12,.20);
  --shadow-btn-hover:  0 14px 30px rgba(22,17,12,.28);
  --shadow-card-hover: 0 2px 5px rgba(28,22,17,.04), 0 20px 44px -14px rgba(28,22,17,.16);
  --shadow-magnet:     0 0 0 1px rgba(197,160,89,.55), 0 30px 60px -18px rgba(28,22,17,.22);
  --shadow-inset-top:  inset 0 1px 0 rgba(255,255,255,.9);   /* paper top highlight */
  --shadow-photo:      0 2px 4px rgba(28,22,17,.06), 0 22px 40px -18px rgba(28,22,17,.4);

  /* ---------- motion · easing ---------- */
  --ease-out:      cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1); /* @kind other */
  --ease-expo:     cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-smooth:   cubic-bezier(.19, 1, .22, 1); /* @kind other */
  --ease-inout:    cubic-bezier(.4, 0, .2, 1); /* @kind other */

  /* ---------- motion · duration ---------- */
  --dur-fast:   .15s; /* @kind other */
  --dur-base:   .3s; /* @kind other */
  --dur-slow:   .45s; /* @kind other */
  --dur-reveal: .65s; /* @kind other */
  --lift-hover: -2px; /* @kind other */
  --lift-card:  -6px; /* @kind other */
  --press-scale: .97; /* @kind other */

  /* ---------- motion · choreography (Atelier live session) ----------
     Previously hard-coded inside component descriptions; tokenised in 1.1
     so the whole live session can be re-timed (or per-expert themed) at once.
     accent-text cross-fade · glow cross-fade · numeral count-up · Polaroid
     printfeed · per-word karaoke cadence · scroll stagger · speaking pulse. */
  --dur-accent-fade: .45s; /* @kind other */
  --dur-glow-fade:   .7s; /* @kind other */
  --dur-count-up:    1.1s; /* @kind other */
  --dur-printfeed:   1.6s; /* @kind other */
  --cadence-karaoke: 260ms; /* @kind other */
  --stagger-child:   100ms; /* @kind other */
  --speak-pulse:     1.1s; /* @kind other */

  /* ---------- paper textures ---------- */
  /* Retired: the fine dotted paper grain has been removed system-wide for a clean,
     flat cream surface. Tokens kept as `none` so existing `var(--tex-*)` background
     layers resolve to a no-op. The colorist's fabric Swatch keeps its own woven-twill
     texture (defined inline in Swatch.jsx), which is intentional and unaffected. */
  --tex-dot:      none; /* @kind other */
  --tex-dot-fine: none; /* @kind other */
  --tex-halftone: none; /* @kind other */

  /* ---------- warm gradients ---------- */
  --grad-page:   linear-gradient(180deg, #FBF7F0 0%, #F4ECE3 100%); /* @kind other */
  --grad-card:   linear-gradient(180deg, var(--cream-100), var(--cream-150)); /* @kind other */
  --grad-brand:  linear-gradient(180deg, #0E5A63, #0A4C54); /* @kind other */
  --grad-gold:   linear-gradient(180deg, #EAD09A, #DFBA73); /* @kind other */
  --grad-dark:   radial-gradient(120% 120% at 50% 0%, #14110D, #0E0B08); /* @kind other */
  --glow-gold:   radial-gradient(circle, rgba(200,150,90,.20), transparent 66%); /* @kind other */
  --glow-teal:   radial-gradient(circle, rgba(10,76,84,.14), transparent 68%); /* @kind other */

  /* ---------- blur ---------- */
  --blur-glass: blur(18px) saturate(140%); /* @kind other */
}

/* ============================================================
   REDUCED MOTION — visible control + system setting (1.1)
   The brand honours the OS `prefers-reduced-motion`, but 1.1 also gives the
   user a real stop button: the MotionToggle component sets `data-reduce-motion`
   on <html> (persisted). Either path neutralises all animation & transition
   choreography system-wide — the karaoke transcript, printfeed, glow
   cross-fades, count-ups and hover lifts all settle to their end state.
   ============================================================ */
html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}