@import "tailwindcss";

@variant dark (.dark &);

:root {
  --background: #fbf7ff;
  --foreground: #2c2740;
  --ink: #2c2740;
  --ink-soft: #5a527a;
  --muted: #8a83a8;
  --card: #ffffff;
  --card-soft: #f6f1ff;
  --border: #ece5fa;
  --accent: #8a7be3;
  --accent-soft: #efeafd;
  --success: #7fb89c;
  --success-soft: #eaf6ef;
  --success-border: #c9e3d4;
  --success-ink: #305a45;
  --halo-1: rgba(255, 213, 232, 0.55); /* soft pink */
  --halo-2: rgba(204, 224, 255, 0.55); /* baby blue */
  --halo-3: rgba(232, 218, 255, 0.55); /* lavender */
  color-scheme: light;
}

:root[data-theme="dark"],
.dark {
  --background: #0f0c1f;
  --foreground: #e9e4f6;
  --ink: #ece8fa;
  --ink-soft: #b9b1d6;
  --muted: #8a83a8;
  --card: #1a1530;
  --card-soft: #221c3d;
  --border: #2c2548;
  --accent: #b1a3ff;
  --accent-soft: #2a2350;
  --success: #7fb89c;
  --success-soft: #1d2e26;
  --success-border: #2f4d3d;
  --success-ink: #b9e0c9;
  --halo-1: rgba(120, 70, 130, 0.35);
  --halo-2: rgba(60, 90, 160, 0.35);
  --halo-3: rgba(80, 60, 150, 0.35);
  color-scheme: dark;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Quicksand', 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cosmic-newborn background: soft radial halos + pinpoint stars */
.bg-cosmic {
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 50%, transparent 51%);
  background-attachment: fixed;
}

.dark .bg-cosmic {
  background-image:
    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 50%, transparent 51%);
}

.bg-card {
  background-color: var(--card);
}

.bg-card-soft {
  background-color: var(--card-soft);
}

.shadow-soft {
  box-shadow: 0 6px 20px -10px rgba(138, 123, 227, 0.25), 0 2px 6px -2px rgba(44, 39, 64, 0.06);
}

.shadow-lifted {
  box-shadow: 0 18px 40px -18px rgba(138, 123, 227, 0.35), 0 6px 14px -6px rgba(44, 39, 64, 0.08);
}

/* Form elements */
:root input,
:root textarea,
:root select {
  color: var(--ink);
  background-color: var(--card);
  border-color: var(--border);
}

:root input::placeholder,
:root textarea::placeholder {
  color: var(--muted);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
.dark input,
.dark textarea,
.dark select {
  color: var(--ink);
  background-color: var(--card-soft);
  border-color: var(--border);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--muted);
}