/* TraxWax — production stylesheet
   Tokens + base + responsive. Component styling is inline in app.js (ported
   verbatim from the Claude Design kit) so the design stays authoritative. */

:root {
  --bg:#eceef0; --panel:#ffffff; --bar:#d8dade; --ink:#16171a; --muted:#54585f;
  --faint:#666a72; --line:#16171a; --hair:#d6d8dc; --accent:#e8194b; --on-accent:#ffffff;
  --shadow:#16171a; --tape:rgba(150,155,163,.26); --skel:#e4e6e9;
  --columns:6;
}
body[data-theme="dark"] {
  --bg:#0e0f11; --panel:#17181b; --bar:#212329; --ink:#f0efed; --muted:#b4b7bd;
  --faint:#9ea2a9; --line:#3a3d44; --hair:#2b2d33; --accent:#e01046; --on-accent:#ffffff;
  --shadow:#000000; --tape:rgba(255,255,255,.12); --skel:#212329;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Archivo',Helvetica,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--ink); }
button { font:inherit; color:inherit; cursor:pointer; }
input { font:inherit; color:inherit; }
input::placeholder { color:var(--faint); }
*:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@keyframes twshimmer { 0% { opacity:.55 } 50% { opacity:1 } 100% { opacity:.55 } }

/* Interactive affordances the kit hinted at but couldn't express as real CSS */
.tw-artist:hover { color:var(--accent) !important; }
.tw-title:hover  { color:var(--accent) !important; }

/* The grid reads --columns; responsive rules override it (spec §4). */
.tw-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:16px; padding:22px 24px 28px; }
@media (max-width:1399px){ :root{ --columns:5; } }
@media (max-width:1099px){ :root{ --columns:4; } }
@media (max-width:819px) { :root{ --columns:3; } }
@media (max-width:599px) { :root{ --columns:2; } }