@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
  --color-apple-bg: #f5f5f7;
  --color-apple-blue: #0071e3;
  --color-apple-blue-hover: #0077ed;
  --color-glass: rgba(255, 255, 255, 0.7);
  --color-glass-border: rgba(255, 255, 255, 0.2);
  --color-glass-shadow: rgba(0, 0, 0, 0.05);
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

html {
  font-family: var(--font-sans);
  background: var(--color-apple-bg);
  transition: background-color 0.3s;
}

html.dark {
  background: #0a0a0f;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Glass ---- */
.glass {
  background: var(--color-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-glass-border);
  box-shadow: 0 8px 32px var(--color-glass-shadow);
}

.dark .glass {
  background: rgba(30, 30, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ---- Background orbs ---- */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

.dark .bg-orb { opacity: 0.25; }

.hero-wordmark {
  position: relative;
}

.bg-orb-purple {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #c084fc 0%, transparent 70%);
  top: -100px;
  right: -100px;
}

.bg-orb-blue {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
  bottom: -50px;
  left: -100px;
}

.bg-orb-pink {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #f472b6 0%, transparent 70%);
  top: 40%;
  left: 50%;
}

/* ---- Score bar ---- */
.score-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}

.dark .score-bar { background: #2a2a35; }

.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-apple-blue), #34d399);
}

/* ---- Skeleton ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.dark .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
}
