frontend/app/globals.css

/* ── EUMORA New Design System ──────────────────────────────────────────────── */
/* oklch-based dark theme with deep purple accents                            */

:root {
  --bg: oklch(0.13 0.025 295);
  --bg-deeper: oklch(0.09 0.022 295);
  --bg-card: oklch(0.17 0.028 295);
  --bg-card-hi: oklch(0.21 0.03 295);
  --line: oklch(0.27 0.025 295 / 0.6);
  --line-soft: oklch(0.27 0.025 295 / 0.3);
  --fg: oklch(0.96 0.012 80);
  --fg-dim: oklch(0.72 0.018 290);
  --fg-faint: oklch(0.5 0.02 290);
  --purple: oklch(0.68 0.22 300);
  --purple-soft: oklch(0.58 0.18 300);
  --purple-deep: oklch(0.35 0.14 300);
  --amber: oklch(0.88 0.14 75);
  --amber-soft: oklch(0.78 0.13 70);
  --danger: oklch(0.7 0.18 25);
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 110%, oklch(0.18 0.04 305 / 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 0%, oklch(0.10 0.02 295) 0%, transparent 50%);
}

/* subtle grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#__next { position: relative; z-index: 2; }

::selection { background: var(--purple); color: var(--bg); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* utility — lampglow blend layer */
.lamp-light {
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}
.lamp-anchor { will-change: transform; }

/* skeleton */
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}
.skel {
  background: linear-gradient(90deg,
    oklch(0.22 0.03 295) 0%,
    oklch(0.28 0.035 295) 50%,
    oklch(0.22 0.03 295) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite, pulse 2.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { opacity: 0.9; filter: blur(0px); }
  50% { opacity: 1; filter: blur(0.3px); }
}

/* track card hover */
.track-card { transition: background 220ms ease, transform 220ms ease, border-color 220ms ease; }
.track-card:hover { background: var(--bg-card-hi); border-color: var(--line); transform: translateY(-2px); }
.chip { transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.chip:hover { background: oklch(0.22 0.03 295); border-color: var(--line); color: var(--fg); }
.analyze-btn { transition: background 200ms ease, box-shadow 200ms ease, transform 120ms ease; }
.analyze-btn:hover:not(:disabled) { background: var(--purple); box-shadow: 0 8px 40px -8px oklch(0.68 0.22 300 / 0.6); }
.analyze-btn:active:not(:disabled) { transform: translateY(1px); }
.analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; }

textarea::placeholder { color: var(--fg-faint); font-style: italic; }
textarea:focus { outline: none; }

/* scrollbar */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: oklch(0.27 0.025 295); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }