@import "tailwindcss";

/* ============================================
   TRANSMUTE — Playful Pastel Theme
   Force light color-scheme so dark mode OS
   doesn't override our cream backgrounds.
   ============================================ */

@theme inline {
  --color-bg-cream: #fef7f0;
  --color-bg-warm: #fff5eb;
  --color-bg-peach: #ffecd9;
  --color-text-dark: #2d1f14;
  --color-text-mid: #7a6552;
  --color-text-light: #b8a08a;
  --color-border-soft: rgba(180, 140, 100, 0.12);
  --color-border-med: rgba(180, 140, 100, 0.25);
  --color-pink: #f472b6;
  --color-purple: #a78bfa;
  --color-blue: #60a5fa;
  --color-mint: #34d399;
  --color-orange: #fb923c;
  --color-teal: #2dd4bf;

  --font-sans: var(--font-plus-jakarta-sans);
  --font-serif: var(--font-fraunces);
  --font-mono: var(--font-jetbrains-mono);
}

html {
  color-scheme: light;
}

body {
  background: var(--color-bg-cream);
  color: var(--color-text-dark);
  font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
  overflow-x: hidden;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(180, 140, 100, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 140, 100, 0.25);
}

/* ---- Gradient text utility ---- */
/* Removed — using solid text colors instead */

/* ---- Animations ---- */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 4px 20px rgba(244, 114, 182, 0.25); }
  50% { box-shadow: 0 4px 32px rgba(167, 139, 250, 0.35); }
}

.animate-badge-pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* ---- Orbit animations for landing page constellation ---- */
@keyframes orbit-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbit-med {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.animate-orbit-slow {
  animation: orbit-slow 60s linear infinite;
}

.animate-counter-orbit-slow {
  animation: orbit-slow 60s linear infinite reverse;
}

.animate-orbit-med {
  animation: orbit-med 40s linear infinite reverse;
}

.animate-counter-orbit-med {
  animation: orbit-med 40s linear infinite;
}

/* ---- Dot pattern background ---- */
.bg-dots {
  background-image: radial-gradient(circle, rgba(180, 140, 100, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Pastel mesh background ---- */
.bg-pastel-mesh {
  background-color: rgba(244, 114, 182, 0.03);
}

/* ---- Top-border accent for privacy card ---- */
.border-t-rainbow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-pink);
  border-radius: inherit;
}

/* ---- Format select dropdown arrow ---- */
.select-arrow-warm {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23b8a08a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
