/* Direction: Sugar Plum — candy-shop cream, raspberry accent, chocolate band, a soft serif display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fff6ee;
  --surface: #ffffff;
  --surface-2: #ffe7ea;
  --border: #f0d5cf;
  --border-strong: #bbaeab;
  --ink: #3a1d22;
  --muted: #7a5560;
  --accent: #c2255c;
  --accent-hover: #a51f4e;
  --accent-ink: #ffffff;
  --accent-text: #a81b4c;
  --accent-strong: #c2255c;
  --accent-soft: #ffdde6;
  --accent-border: #e498ac;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3e8d9;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e2d3;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dcd5;
  --danger-strong: #b91c1c;
  --chart-1: #c2255c;
  --chart-2: #c07505;
  --chart-3: #476301;
  --chart-4: #21968c;
  --chart-5: #005991;
  --chart-6: #a45edf;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-btn: 999px;
  --radius-card: 24px;
  --radius-input: 14px;
  --x-choc: #3a1d22;
  --x-on-photo: #fff6ee;
  --x-mint: #bfe6d3;
  --x-butter: #ffe59a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110308;
  --surface: #291c21;
  --surface-2: #1d1014;
  --border: #32262b;
  --border-strong: #584f52;
  --ink: #fff6ee;
  --muted: #a09592;
  --accent: #c2255c;
  --accent-hover: #cb4674;
  --accent-ink: #ffffff;
  --accent-text: #d3638a;
  --accent-strong: #d3638a;
  --accent-soft: #380a1a;
  --accent-border: #61122e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #121f14;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #351508;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #36090c;
  --danger-strong: #d16969;
  --chart-1: #c92d62;
  --chart-2: #c67b15;
  --chart-3: #698f09;
  --chart-4: #0f9d93;
  --chart-5: #1086d4;
  --chart-6: #aa65e6;
}

.ribbon { background: var(--accent); overflow: hidden; }
.ribbon-track { display: flex; width: max-content; animation: ribbon 32s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.reduced-motion .ribbon-track { animation: none; }

.arch { border-radius: 999px 999px 24px 24px; }
.sweet-card { transition: transform .25s ease, box-shadow .25s ease; }
.sweet-card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 18px 40px -18px rgba(58, 29, 34, .35); }
html.reduced-motion .sweet-card:hover { transform: none; }

.sticker { animation: wobble 6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }
html.reduced-motion .sticker { animation: none; }

.band-choc { background: var(--x-choc); color: var(--x-on-photo); }