/* Theme: bakery - "Slik & bagning".
 * Strawberry-cream background, pink icing dripping from the top edge, sprinkles in the corners,
 * a cupcake and a sprinkle donut gently bobbing along the bottom edge.
 * Light theme: chocolate-cherry text on cream cards. Contrast checked numerically (see report). */

html[data-ordleg-theme="bakery"] {
  --bg: radial-gradient(ellipse at 0% 100%, #ffd3e2 0%, transparent 50%),
        radial-gradient(ellipse at 100% 30%, #ffe2cf 0%, transparent 45%),
        radial-gradient(ellipse at 50% 0%, #fff9f1 0%, transparent 60%),
        linear-gradient(170deg, #fff3e6 0%, #ffe9ee 55%, #ffdbe7 100%);
  --fg: #4a1f2c;
  --fg-muted: #76404f;
  --accent: #c4295f;
  --accent-fg: #ffffff;
  --card: rgba(255, 252, 247, 0.72);
  --card-strong: rgba(255, 252, 248, 0.97);
  --card-border: rgba(196, 41, 95, 0.22);
  --taboo: #b0204f;
  --taboo-bg: rgba(196, 41, 95, 0.09);
  --timer-ok: #e86a9a;
  --timer-warn: #b8174f;
  --ok: #16805a;
  --bad: #b0204f;
  --subtle: rgba(118, 64, 79, 0.15);
  --selected-bg: rgba(196, 41, 95, 0.1);
  --selected-ring: rgba(196, 41, 95, 0.22);
  --overlay: rgba(74, 31, 44, 0.5);
}

/* deco-a: pink icing dripping along the top edge */
html[data-ordleg-theme="bakery"] .theme-deco .deco-a {
  top: 0;
  left: 0;
  right: 0;
  height: 7vh;
  background: url("../../assets/themes/bakery/drip.svg") left top / auto 100% repeat-x;
  filter: drop-shadow(0 0.3vh 0.4vh rgba(196, 41, 95, 0.18));
}

/* deco-b: full-frame holder for a cupcake (left of centre, between the skip button and the hint)
 * and a sprinkle donut (right of centre), both sitting on the bottom edge and bobbing gently */
html[data-ordleg-theme="bakery"] .theme-deco .deco-b { inset: 0; }
html[data-ordleg-theme="bakery"] .theme-deco .deco-b::before,
html[data-ordleg-theme="bakery"] .theme-deco .deco-b::after {
  content: "";
  position: absolute;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.6vh 0.8vh rgba(120, 30, 60, 0.18));
  animation: bakery-bob 6s ease-in-out infinite alternate;
}
html[data-ordleg-theme="bakery"] .theme-deco .deco-b::before {
  left: 16vw;
  bottom: -0.5vh;
  width: 14vh;
  height: 16vh;
  background-image: url("../../assets/themes/bakery/cupcake.svg");
}
html[data-ordleg-theme="bakery"] .theme-deco .deco-b::after {
  right: 19vw;
  bottom: 0.8vh;
  width: 13vh;
  height: 13vh;
  background-image: url("../../assets/themes/bakery/donut.svg");
  animation-name: bakery-bob-tilt;
  animation-delay: -3s;
}

/* deco-c: sprinkles scattered in the top-right and both bottom corners (top-left is kept clear for the logo) (two layers twinkle softly in turn) */
html[data-ordleg-theme="bakery"] .theme-deco .deco-c { inset: 0; }
html[data-ordleg-theme="bakery"] .theme-deco .deco-c::before,
html[data-ordleg-theme="bakery"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("../../assets/themes/bakery/sprinkles.svg") right 0 top 6vh / 28vmin 21vmin no-repeat,
    url("../../assets/themes/bakery/sprinkles.svg") left 0 bottom 0 / 24vmin 18vmin no-repeat,
    url("../../assets/themes/bakery/sprinkles.svg") right 0 bottom 0 / 24vmin 18vmin no-repeat;
  animation: bakery-twinkle 7s ease-in-out infinite alternate;
}
html[data-ordleg-theme="bakery"] .theme-deco .deco-c::after {
  background:
    url("../../assets/themes/bakery/sprinkles.svg") right 7vmin top 14vh / 20vmin 15vmin no-repeat,
    url("../../assets/themes/bakery/sprinkles.svg") left 9vmin bottom 9vmin / 18vmin 13.5vmin no-repeat,
    url("../../assets/themes/bakery/sprinkles.svg") right 9vmin bottom 9vmin / 18vmin 13.5vmin no-repeat;
  animation-delay: -3.5s;
}

@keyframes bakery-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-1vh); }
}
@keyframes bakery-bob-tilt {
  from { transform: translateY(0) rotate(-12deg); }
  to { transform: translateY(-1vh) rotate(-8deg); }
}
@keyframes bakery-twinkle {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="bakery"] .theme-deco *,
  html[data-ordleg-theme="bakery"] .theme-deco *::before,
  html[data-ordleg-theme="bakery"] .theme-deco *::after { animation: none; }
}