: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: #FFF7E0;
  --bg-2: #FFEFC2;
  --ink: #2B1E0F;
  --ink-soft: #6B5735;
  --ink-muted: #9A8A64;
  --sun: #FED74B;
  --sun-deep: #F5B91C;
  --coral: #FF8C79;
  --coral-deep: #F9555C;
  --pink: #FE9DBE;
  --teal: #00CEA2;
  --sky: #78DEF4;
  --violet: #A481F7;
  --lime: #9DDC5A;
  --cream: #FFE1A1;
  --paper: #FFFDF6;
  --outline: #2B1E0F;
  /* 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;
  }
}