/* SunoMA design system — built on DaisyUI's built-in light/dark themes (loaded
   from the CDN). We keep DaisyUI's neutral surfaces (base-100/200/300) for the
   clean look, and only re-tint the brand colors (primary/secondary/accent) to
   the SunoMA pink. Legacy helper classes (.card2/.inp/.tk/.btn-accent/…) are
   re-mapped onto the same DaisyUI CSS variables so every page themes together. */

/* ---- brand: pink primary on top of DaisyUI light & dark ---- */
[data-theme="light"], [data-theme="dark"] {
  --p:  67.843% 0.2325 356.14;   /* #fd429c  primary   */
  --pf: 60.934% 0.2213 356.50;   /* darker for hover    */
  --pc: 100% 0 0;                /* white on primary    */
  --s:  75.616% 0.171 352.07;    /* #ff7dbb  secondary  */
  --sf: 67.843% 0.2325 356.14;
  --sc: 22% 0.06 356;            /* dark on secondary   */
  --a:  67.843% 0.2325 356.14;   /* accent = primary    */
  --ac: 100% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.6rem;
}

html, body { background-color: oklch(var(--b1)); color: oklch(var(--bc)); }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }

/* ---- brand text helpers ---- */
.accent, .text-primary-brand { color: oklch(var(--p)); }
.text-muted { color: oklch(var(--bc) / 0.6); }
.brand-grad {
  background: linear-gradient(120deg, oklch(var(--p)), oklch(var(--s)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- cards / surfaces (legacy .card2 → base-200) ---- */
.card2 {
  background-color: oklch(var(--b2));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--rounded-box);
}
.surface-2 { background-color: oklch(var(--b3)); }

/* ---- inputs ---- */
.inp {
  background-color: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc));
  border-radius: var(--rounded-btn);
}
.inp::placeholder { color: oklch(var(--bc) / 0.4); }
.inp:focus { outline: none; border-color: oklch(var(--p)); box-shadow: 0 0 0 2px oklch(var(--p) / 0.2); }

/* ---- accent button (legacy .btn-accent → primary) ---- */
.btn-accent { background-color: oklch(var(--p)); border: none; color: oklch(var(--pc)); }
.btn-accent:hover { background-color: oklch(var(--pf)); }
.btn-accent:disabled { filter: grayscale(.4) brightness(.8); }

/* ---- tile / segment (legacy .tk) ---- */
.tk { background-color: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); color: oklch(var(--bc)); transition: border-color .15s, background-color .15s; }
.tk:hover { border-color: oklch(var(--p)); }
.tk.on { border-color: oklch(var(--p)); color: oklch(var(--p)); background-color: oklch(var(--p) / 0.08); }
.seg-on { background-color: oklch(var(--p)); color: oklch(var(--pc)); border-color: oklch(var(--p)); }

/* ---- code blocks ---- */
pre.code {
  background-color: oklch(var(--b3));
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc));
  white-space: pre-wrap; word-break: break-word;
}

/* ---- status pills for clips ---- */
.status-pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid oklch(var(--b3)); text-transform: capitalize; }
.status-pill.complete, .status-pill.streaming { color: oklch(var(--su)); border-color: oklch(var(--su) / 0.4); background: oklch(var(--su) / 0.1); }
.status-pill.submitted, .status-pill.queued, .status-pill.processing { color: oklch(var(--wa)); border-color: oklch(var(--wa) / 0.4); background: oklch(var(--wa) / 0.1); }
.status-pill.error { color: oklch(var(--er)); border-color: oklch(var(--er) / 0.4); background: oklch(var(--er) / 0.1); }

/* ---- sidebar links ---- */
.side-link { color: oklch(var(--bc)); border-radius: var(--rounded-btn); transition: background-color .15s; }
.side-link:hover { background-color: oklch(var(--b3)); }
.side-link.on { background-color: oklch(var(--p) / 0.12); color: oklch(var(--p)); font-weight: 600; }

/* ---- misc ---- */
.divide-b { border-bottom: 1px solid oklch(var(--b3)); }
.toast .alert { background-color: oklch(var(--b2)); border: 1px solid oklch(var(--b3)); color: oklch(var(--bc)); }
* { scrollbar-width: thin; scrollbar-color: oklch(var(--bc) / 0.2) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 5px; height: 5px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.15); border-radius: 4px; }

/* ---- base color utilities fallback ----
   DaisyUI's prebuilt full.min.css ships these, but we redefine them against the
   theme vars so surfaces render correctly regardless of the CDN build. Loaded
   after DaisyUI, so these win harmlessly when duplicated. */
.bg-base-100 { background-color: oklch(var(--b1)); }
.bg-base-200 { background-color: oklch(var(--b2)); }
.bg-base-300 { background-color: oklch(var(--b3)); }
.bg-base-200\/80 { background-color: oklch(var(--b2) / 0.8); }
.border-base-300 { border-color: oklch(var(--b3)); }
.bg-primary { background-color: oklch(var(--p)); }
.text-primary { color: oklch(var(--p)); }
.text-primary-content { color: oklch(var(--pc)); }

[x-cloak] { display: none !important; }

.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}