themes-pastel-dream/assets/style.css

/* Pastel Dream — theme stylesheet served at /templates/pastel-dream/style.css
 *
 * The bulk of the theme CSS (utility classes, keyframes, --radius-soft) is
 * injected into the host Tailwind input via CSSManifest.InputCSSAppend so it
 * participates in Tailwind's purge. This file holds anything an admin's
 * browser may load directly when rendering a page — it currently mirrors the
 * injected utilities so the page still gets variables and keyframes even if
 * the CSSManifest pipeline is bypassed.
 */

:root {
  --radius-soft: 20px;
}

.bg-watercolor-blush {
  background-image:
    radial-gradient(60% 70% at 20% 30%, hsl(var(--primary) / 0.18) 0%, transparent 65%),
    radial-gradient(50% 60% at 80% 70%, hsl(var(--accent) / 0.15) 0%, transparent 60%);
}

.bg-watercolor-mint {
  background-image:
    radial-gradient(60% 70% at 25% 35%, hsl(var(--secondary) / 0.45) 0%, transparent 65%),
    radial-gradient(55% 65% at 75% 65%, hsl(var(--primary) / 0.12) 0%, transparent 60%);
}

.shadow-soft {
  box-shadow: 0 12px 40px -8px hsl(var(--primary) / 0.18),
              0 4px 12px -2px hsl(var(--primary) / 0.10);
}

.deckle-edge {
  border: 1px dashed hsl(var(--border));
}

.pastel-pill {
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body, "Nunito", "Quicksand", system-ui, sans-serif);
  font-weight: 600;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 24px -6px hsl(var(--primary) / 0.40);
  transition: transform 240ms cubic-bezier(.22,1,.36,1),
              box-shadow 240ms cubic-bezier(.22,1,.36,1),
              background-color 240ms cubic-bezier(.22,1,.36,1);
  border: none;
  cursor: pointer;
  display: inline-block;
}

.pastel-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -6px hsl(var(--primary) / 0.50);
  background-color: hsl(var(--primary) / 0.92);
}

.pastel-pill:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.pastel-card {
  border-radius: var(--radius-soft);
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 12px 40px -8px hsl(var(--primary) / 0.18),
              0 4px 12px -2px hsl(var(--primary) / 0.10);
}

.brush-underline {
  position: relative;
  display: inline-block;
}

.brush-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 0.22em;
  background-color: hsl(var(--accent) / 0.55);
  border-radius: 9999px;
  z-index: -1;
}

.font-display {
  font-family: var(--font-heading, "Caveat Brush", "Sacramento", "Brush Script MT", cursive);
  letter-spacing: 0.01em;
}

.font-body {
  font-family: var(--font-body, "Nunito", "Quicksand", "Helvetica Neue", system-ui, sans-serif);
  line-height: 1.75;
}

.font-mono {
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", ui-monospace, monospace);
}

@keyframes pastel-shimmer {
  0% { background-position: 0% 50%; opacity: 0.85; }
  50% { background-position: 100% 50%; opacity: 1; }
  100% { background-position: 0% 50%; opacity: 0.85; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
}

.animate-pastel-shimmer {
  background-size: 200% 200%;
  animation: pastel-shimmer 8s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-pastel-shimmer,
  .animate-breathe,
  .pastel-pill {
    animation: none !important;
    transition: none !important;
  }
  .pastel-pill:hover {
    transform: none;
  }
}