/*
 * Design system vibe overrides (preview only).
 * Body data-vibe is set by JS on /design when user clicks a vibe button.
 */

/* Default: no overrides (new theme: Outfit, Source Sans 3, teal) */

/* Pastel (pocket): previous look we kept for reference */
[data-vibe="pastel"] .design-page {
  background-color: #faf8f5;
}

[data-vibe="pastel"] .design-display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
}

[data-vibe="pastel"] .design-body {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

[data-vibe="pastel"] .design-btn-primary {
  background-color: #c45c3e !important;
}

[data-vibe="pastel"] .design-btn-primary:hover {
  background-color: #a84d32 !important;
}

[data-vibe="pastel"] .design-card {
  border-color: #e8e0d8;
  background-color: #fffefb;
}

/* Groovy: rounded, bouncy type, warmer palette */
[data-vibe="groovy"] .design-display {
  font-family: "Pacifico", cursive;
  letter-spacing: 0.02em;
}

[data-vibe="groovy"] .design-body {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
}

[data-vibe="groovy"] .design-btn-primary {
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

[data-vibe="groovy"] .design-card {
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-vibe="groovy"] .design-page {
  --tw-bg-opacity: 1;
  background-color: rgb(255 243 224 / var(--tw-bg-opacity));
}

/* Serene: lighter, more space, soft serif */
[data-vibe="serene"] .design-display {
  font-family: "Lora", ui-serif, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

[data-vibe="serene"] .design-body {
  font-family: "Lora", ui-serif, Georgia, serif;
  line-height: 1.75;
}

[data-vibe="serene"] .design-card {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(229 231 235);
  box-shadow: none;
}

[data-vibe="serene"] .design-page {
  background-color: #fafafa;
}

/*
 * Curated: Serene (Lora) + 4-color palette (no I Am Legend).
 * Plum #605063, Forever #B2D5BA, Venus #61ADA0, If the Sea was Magic #248F8D.
 */
[data-vibe="curated"] .design-page {
  --color-bg: #fafafa;
  --color-ink: #605063;
  --color-ink-muted: #605063;
  --color-primary: #248f8d;
  --color-primary-hover: #1e7573;
  --color-primary-light: #61ada0;
  --color-border: #b2d5ba;
  --color-card: #ffffff;
  --font-display: "Lora", ui-serif, Georgia, serif;
  --font-body: "Lora", ui-serif, Georgia, serif;
  background-color: #fafafa !important;
}

[data-vibe="curated"] .design-page main {
  background-color: #fafafa !important;
}

[data-vibe="curated"] .design-display {
  font-family: "Lora", ui-serif, Georgia, serif !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #605063 !important;
}

[data-vibe="curated"] .design-body {
  font-family: "Lora", ui-serif, Georgia, serif !important;
  line-height: 1.75;
  color: #605063 !important;
}

[data-vibe="curated"] .design-btn-primary {
  background-color: #248f8d !important;
  color: #fff !important;
}

[data-vibe="curated"] .design-btn-primary:hover {
  background-color: #1e7573 !important;
}

/* Cards: I Am Legend so it’s used a lot; purple left border for more purple */
[data-vibe="curated"] .design-card {
  background-color: #fff !important;
  border: 1px solid #b2d5ba !important;
  border-left: 8px solid #605063 !important;
  border-radius: 0.5rem;
  box-shadow: none;
}

/* Sections: alternate white and light plum tint */
[data-vibe="curated"] .design-page main > section:nth-of-type(odd) {
  background-color: #fafafa !important;
  padding: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  border-left: 6px solid #605063;
}

[data-vibe="curated"] .design-page main > section:nth-of-type(even) {
  background-color: rgba(96, 80, 99, 0.06) !important;
  padding: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  border-left: 6px solid #605063;
}

[data-vibe="curated"] .design-page .text-xs.uppercase {
  color: #605063 !important;
  background-color: rgba(96, 80, 99, 0.12) !important;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

[data-vibe="curated"] .design-page .text-xs.uppercase + * {
  background-color: transparent !important;
  padding: 0.25rem 0;
}

/* Header: plum bar */
[data-vibe="curated"] .design-page header {
  background: #605063 !important;
  border-bottom: none !important;
}

[data-vibe="curated"] .design-page header .text-ink,
[data-vibe="curated"] .design-page header .text-sm,
[data-vibe="curated"] .design-page header span {
  color: #fff !important;
}

[data-vibe="curated"] .design-page header .vibe-btn {
  color: #605063 !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

[data-vibe="curated"] .design-page header .vibe-btn[aria-pressed="true"] {
  background-color: #fafafa !important;
  color: #605063 !important;
  border: 2px solid #fff !important;
}

/* Section titles: plum block (more plum) */
[data-vibe="curated"] .design-page section h2 {
  color: #605063 !important;
  background-color: rgba(96, 80, 99, 0.1) !important;
  border-bottom: 4px solid #605063;
  padding: 0.35rem 0.5rem 0.25rem;
  border-radius: 4px 4px 0 0;
}

[data-vibe="curated"] .design-page .text-ink {
  color: #605063 !important;
}

[data-vibe="curated"] .design-page .text-ink-muted {
  color: #605063 !important;
  opacity: 0.85;
}

[data-vibe="curated"] .design-page .text-primary {
  color: #248f8d !important;
}

[data-vibe="curated"] .design-page .hover\:bg-primary\/10:hover {
  background-color: rgba(36, 143, 141, 0.1) !important;
}

[data-vibe="curated"] .design-page .hover\:bg-gray-100:hover {
  background-color: rgba(96, 80, 99, 0.06) !important;
}

/* Swatches: bg = off-white, card = white so they’re visible */
[data-vibe="curated"] .design-page .bg-bg {
  background-color: #fafafa !important;
}

[data-vibe="curated"] .design-page .bg-card {
  background-color: #fff !important;
}

[data-vibe="curated"] .design-page .bg-ink {
  background-color: #605063 !important;
}

[data-vibe="curated"] .design-page .border-border {
  border-color: #b2d5ba !important;
}

/* Form inputs: white bg; plum focus */
[data-vibe="curated"] .design-page input[type="tel"],
[data-vibe="curated"] .design-page input[type="text"] {
  background-color: #fff !important;
  border-color: #b2d5ba !important;
}

[data-vibe="curated"] .design-page input:focus {
  outline: none !important;
  border-color: #605063 !important;
  box-shadow: 0 0 0 3px rgba(96, 80, 99, 0.2) !important;
}

/* Notice/alert boxes: white bg, plum border */
[data-vibe="curated"] .design-page .rounded-xl.border.border-green-300,
[data-vibe="curated"] .design-page .rounded-xl.border.border-red-300 {
  background-color: #fff !important;
  border-color: #605063 !important;
  border-left-width: 6px !important;
}

/* Playful: brighter pastels, chunky buttons */
[data-vibe="playful"] .design-display {
  font-family: "Fredoka", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}

[data-vibe="playful"] .design-btn-primary {
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
}

[data-vibe="playful"] .design-card {
  border-radius: 1rem;
  border: 2px solid rgb(253 186 116);
  background-color: rgb(255 251 235);
}

[data-vibe="playful"] .design-page {
  background: linear-gradient(180deg, #fef3c7 0%, #e0e7ff 100%);
}

/* Vaporwave: totally out of the box. Retro, pink/cyan, sci-fi. */
[data-vibe="vaporwave"] .design-page {
  background: linear-gradient(
    160deg,
    #1a0a2e 0%,
    #16213e 25%,
    #0f3460 50%,
    #e94560 75%,
    #0ff 100%
  );
  background-attachment: fixed;
  color: #fff;
}

[data-vibe="vaporwave"] .design-page .text-ink,
[data-vibe="vaporwave"] .design-page .design-display,
[data-vibe="vaporwave"] .design-page .design-body {
  color: #fff;
}

[data-vibe="vaporwave"] .design-page .text-ink-muted {
  color: #01cdfe;
}

[data-vibe="vaporwave"] .design-display {
  font-family: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(1, 205, 254, 0.5);
}

[data-vibe="vaporwave"] .design-body {
  font-family: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}

[data-vibe="vaporwave"] .design-btn-primary {
  background: linear-gradient(90deg, #ff71ce 0%, #01cdfe 100%) !important;
  color: #000 !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid #01cdfe;
  box-shadow: 0 0 15px rgba(1, 205, 254, 0.6);
}

[data-vibe="vaporwave"] .design-btn-primary:hover {
  background: linear-gradient(90deg, #01cdfe 0%, #ff71ce 100%) !important;
  box-shadow: 0 0 25px rgba(255, 113, 206, 0.8);
}

[data-vibe="vaporwave"] .design-card {
  background: rgba(26, 10, 46, 0.85);
  border: 2px solid #01cdfe;
  box-shadow:
    0 0 20px rgba(1, 205, 254, 0.2),
    inset 0 0 20px rgba(255, 113, 206, 0.05);
}

[data-vibe="vaporwave"] .design-page header {
  background: rgba(26, 10, 46, 0.9) !important;
  border-bottom-color: #ff71ce;
}