@import "tailwindcss";

/* ───────────────────────────────────────────────────────────────
   muse design system

   The accent is the ARTWORK. --a-r/g/b hold the dominant colour sampled
   from whatever album is on screen; every tinted surface derives from them,
   so the page takes on the palette of the music instead of a fixed brand
   colour. JS writes those three numbers and nothing else.
   ─────────────────────────────────────────────────────────────── */

@theme inline {
  --color-accent: rgb(var(--a-r) var(--a-g) var(--a-b));
  --color-accent-soft: rgb(var(--a-r) var(--a-g) var(--a-b) / 0.16);
  --color-accent-line: rgb(var(--a-r) var(--a-g) var(--a-b) / 0.4);

  --color-ink: var(--fg);
  --color-dim: var(--dim);
  --color-edge: var(--edge);
  --color-edge-hi: var(--edge-hi);
  --color-faint: var(--faint);

  --color-ok: #3ddc84;
  --color-err: #ff6b6b;
  --color-warn: #ffc95c;

  --radius-glass: 14px;
  --radius-panel: 28px;

  --ease-glass: cubic-bezier(0.22, 0.9, 0.28, 1);

  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

:root {
  --a-r: 120;
  --a-g: 140;
  --a-b: 255;

  --bg: #08090d;
  --fg: #f2f4f9;
  --dim: #9aa3b6;
  --faint: rgb(255 255 255 / 0.07);
  --glass: rgb(255 255 255 / 0.055);
  --glass-hi: rgb(255 255 255 / 0.085);
  --edge: rgb(255 255 255 / 0.1);
  --edge-hi: rgb(255 255 255 / 0.17);
  --sheet: rgb(16 18 26 / 0.86);
  --header: rgb(8 9 13 / 0.62);
  --scrim: rgb(8 9 13 / 0.74);
  --scrim-2: rgb(8 9 13 / 0.4);
  --blur: saturate(170%) blur(22px);
  --shadow: 0 10px 40px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f8;
    --fg: #0e1116;
    --dim: #5a6274;
    --faint: rgb(10 14 25 / 0.07);
    --glass: rgb(255 255 255 / 0.7);
    --glass-hi: rgb(255 255 255 / 0.88);
    --edge: rgb(10 14 25 / 0.09);
    --edge-hi: rgb(10 14 25 / 0.16);
    --sheet: rgb(255 255 255 / 0.95);
    --header: rgb(244 245 248 / 0.72);
    --scrim: rgb(255 255 255 / 0.78);
    --scrim-2: rgb(255 255 255 / 0.5);
    --shadow: 0 10px 34px rgb(20 30 60 / 0.13);
  }
}

@layer base {
  * {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  ::selection {
    background: var(--color-accent-soft);
  }
}

@utility glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

@utility glass-hi {
  background: var(--glass-hi);
  border: 1px solid var(--edge-hi);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

@utility sheet {
  background: var(--sheet);
  border: 1px solid var(--edge-hi);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

@utility clamp1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Very light noise over the gradients — large flat blurs band visibly on
   8-bit panels without it. */
@utility grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@utility no-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Keyframes live here rather than in a <style> tag inside a component: the
   CSP is style-src 'self' with no 'unsafe-inline', so React-rendered <style>
   elements are blocked outright. Setting element.style from JS is fine —
   CSP governs markup, not the CSSOM — which is why Framer Motion works. */
@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

.shimmer {
  background-image: linear-gradient(
    100deg,
    var(--glass) 30%,
    var(--glass-hi) 50%,
    var(--glass) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}