:root {
  /* Opt out of browser auto-invert (Chrome/Firefox "Force Dark"): this site
     is intentionally light-themed and force-inversion breaks the palette
     swatch guide — reported as "dark mode messes with colour selection". */
  color-scheme: light;
  --bg: #F5F1E8;
  --bg-2: #ECE5D8;
  --ink: #1E1B17;
  --ink-soft: #4D4740;
  --ink-muted: #7A7268;
  --sun: #E4B85E;
  --sun-deep: #CB9A3E;
  --coral: #DD7C67;
  --coral-deep: #C76551;
  --pink: #D99AA5;
  --teal: #4B8F8A;
  --sky: #78A9C3;
  --violet: #6E7EAF;
  --lime: #8CAE72;
  --cream: #E8DFC9;
  --paper: #FFFDF8;
  --outline: #1E1B17;
  /* Soft "mood" tints — lifted from Tomodachi Life: Living the Dream's
     thought-bubble palette. Use as panel/background tints, not as primary
     fills. Each pairs with its saturated sibling above. */
  --pink-soft: #FFD6E3;
  --teal-soft: #C8F3E6;
  --sky-soft:  #D6F2FB;
  --violet-soft: #E3D7FB;
  --sun-soft: #FFF2B8;
  /* Springy overshoot easing — gives hover/press/appear a "sticker snap"
     instead of linear sluggishness. Matches the game's bouncy UI. */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  /* Sticker-press shadow: hard offset ink rim + soft ambient drop. Applied
     to lifted cards and pressable controls. */
  --shadow-pop: 0 4px 0 var(--ink), 0 10px 18px rgba(43, 30, 15, 0.14);
  --sidebar-w: 320px;
  --topbar-h: 48px;
  /* Max width of the studio-column (canvas + palette card). Kept as its
     own token because the full-page rail (topbar + .app + footer) is
     derived from it — sidebar + this + main padding. */
  --studio-col-max: 880px;
  /* Total content rail: sidebar + main padding (1rem each side) + studio
     column. Everything that should line up with the canvas's right edge
     (topbar, footer) uses this as max-width. */
  --content-w: calc(var(--sidebar-w) + var(--studio-col-max) + 2rem);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}