/* Calla Kallos brand layer: deep plum with a hint of pink, on warm cream. Logo stays the original plum. */
:root {
  --accent: #78295E;
  --bg: #fff6ef;
  --text: #2b1220;
  --muted: #7a5f6c;
  --line: #f0dfd2;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Playfair Display", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a0d14; --surface: #26131d; --text: #fbeef4; --muted: #c7a6b6; --line: #3d2230; }
}
h1, h2 { font-family: var(--display); font-weight: 600; }
.banner {
  background:
    radial-gradient(circle at 90% 0%, rgba(210, 150, 190, .28), transparent 55%),
    linear-gradient(135deg, #8A3070, #6A2354 55%, #4F1B40);
  border-bottom: 3px solid #D9B8CC;
}
.logo { padding: 6px; object-fit: contain; }
.save { background: linear-gradient(135deg, #82306A, #662451); box-shadow: 0 8px 20px rgba(120, 41, 94, .3); }
.action .icon { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) {
  .save, .action .icon { background: #A04C86; color: #fff; }
  .save { background: linear-gradient(135deg, #AB5690, #8A3070); }
}

/* ---------- Buttons: depth + press animation ---------- */
.save, .enquire, .action, .tool { -webkit-tap-highlight-color: transparent; }

/* Primary: glossy plum with a lit top edge and a soft shadow underneath */
.save {
  background: linear-gradient(180deg, #8F3874 0%, #78295E 50%, #5F1F4A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.18),
              0 2px 4px rgba(79,27,64,.25), 0 10px 22px rgba(120,41,94,.32);
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
/* WhatsApp: same treatment in green */
.enquire {
  background: linear-gradient(180deg, #1FA05C 0%, #11884A 55%, #0C6E3B 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.16),
              0 2px 4px rgba(12,110,59,.25), 0 10px 22px rgba(17,136,74,.28);
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
/* Quick actions: raised tiles with a glossy round icon */
.action {
  background: linear-gradient(180deg, #fff 0%, #f6ecf2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(79,27,64,.12), 0 6px 14px rgba(79,27,64,.10);
}
.action .icon {
  background: linear-gradient(180deg, #92397A 0%, #78295E 55%, #5F1F4A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 6px rgba(79,27,64,.3);
}
/* Share / QR */
.tool {
  background: linear-gradient(180deg, #fff, #faf2ea);
  box-shadow: 0 1px 2px rgba(79,27,64,.1), 0 4px 10px rgba(79,27,64,.07);
}

@media (prefers-reduced-motion: no-preference) {
  .save, .enquire, .action, .tool, .action .icon {
    transition: transform .18s cubic-bezier(.2,.8,.3,1.3), box-shadow .18s ease, filter .18s ease;
  }
  @media (hover: hover) {
    .save:hover, .enquire:hover { transform: translateY(-2px); filter: brightness(1.06); }
    .action:hover, .tool:hover { transform: translateY(-3px); }
  }
  /* Press: sink in, shrink slightly, shadow collapses */
  .save:active, .enquire:active, .tool:active {
    transform: translateY(2px) scale(.975); filter: brightness(.96);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
    transition-duration: .06s; opacity: 1;
  }
  .action:active {
    transform: translateY(1px) scale(.95); opacity: 1;
    box-shadow: inset 0 2px 5px rgba(79,27,64,.18), 0 1px 1px rgba(79,27,64,.1);
    transition-duration: .06s;
  }
  .action:active .icon { transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .save:active, .enquire:active, .tool:active, .action:active { transform: none; }
}

@media (prefers-color-scheme: dark) {
  .save, .action .icon {
    background: linear-gradient(180deg, #BB5D9F 0%, #A04C86 55%, #84386C 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.45);
  }
  .action { background: linear-gradient(180deg, #34202d, #2a1722); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 14px rgba(0,0,0,.4); }
  .tool { background: linear-gradient(180deg, #2e1b27, #26131d); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.35); }
}