:root {
  --pink: #d4537e;
  --pink-2: #db6fa0;
  --pink-3: #e89bbc;
  --pink-fill: #fbeaf0;
  --pink-deep: #993556;
  --pink-darker: #72243e;

  --bg: #ffffff;
  --surface: #faf5f7;
  --surface-2: #f3edef;
  --text: #1d1a1b;
  --text-2: #6b6469;
  --text-3: #9a9094;
  --border: rgba(20, 10, 14, 0.1);
  --border-2: rgba(20, 10, 14, 0.16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-display: "Quicksand", var(--font);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 6px 20px -10px rgba(150, 40, 80, 0.18);
  --shadow-card: 0 2px 10px -8px rgba(120, 30, 64, 0.22);

  --z-nav: 100;
  --z-banner: 200;
  --z-toast: 300;
  --z-confetti: 400;
}

/* dark palette, shared by OS preference and forced dark */
.dark-vars,
:root[data-theme="dark"] {
  --pink: #e8709a;
  --pink-2: #e286ac;
  --pink-3: #d98fb1;
  --pink-fill: #2c1b23;
  --pink-deep: #f2aecb;
  --pink-darker: #f6c8da;
  --bg: #141012;
  --surface: #1d171a;
  --surface-2: #241c20;
  --text: #f4eef0;
  --text-2: #b6abb0;
  --text-3: #837a7e;
  --border: rgba(255, 255, 255, 0.12);
  --border-2: rgba(255, 255, 255, 0.2);
  --shadow-soft: 0 6px 22px -10px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 2px 12px -8px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --pink: #e8709a;
    --pink-2: #e286ac;
    --pink-3: #d98fb1;
    --pink-fill: #2c1b23;
    --pink-deep: #f2aecb;
    --pink-darker: #f6c8da;
    --bg: #141012;
    --surface: #1d171a;
    --surface-2: #241c20;
    --text: #f4eef0;
    --text-2: #b6abb0;
    --text-3: #837a7e;
    --border: rgba(255, 255, 255, 0.12);
    --border-2: rgba(255, 255, 255, 0.2);
    --shadow-soft: 0 6px 22px -10px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 2px 12px -8px rgba(0, 0, 0, 0.5);
  }
}

/* pink-shade personalization (accent hues only; fills/text stay theme-driven) */
:root[data-shade="blush"] {
  --pink: #e08aac;
  --pink-2: #eaa6c2;
  --pink-3: #f2c2d5;
}
:root[data-shade="bold"] {
  --pink: #c4366a;
  --pink-2: #d35a86;
  --pink-3: #e486aa;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}