/* ════════════════════════════════════════════════════════════
   content — Design System (base)
   La Casa Emergent · Agregador musical
   ════════════════════════════════════════════════════════════ */

:root{
  /* La Casa Emergent internal identity */
  --lce-blue:#003DFF;
  --lce-blue-dark:#0017B8;
  --lce-black:#050505;
  --lce-white:#FFFFFF;
  --lce-paper:#F7F7F0;
  --lce-grey:#D9DDE5;
  --lce-silver:#B7BBC8;
  --lce-red:#FF0900;
  --lce-acid:#B7FF00;
  --lce-violet:#5652A5;
  --lce-soft-blue:#DDE5FF;

  /* Colors */
  --bl:#0145F2;          /* blau electric primari */
  --bl-d:#0038CC;
  --bl-l:#3D6FFF;
  --bl-glow:rgba(1,69,242,.4);

  --bg-0:#0A0A14;        /* fons principal (negre blavós) */
  --bg-1:#101020;        /* sidebar / panells */
  --bg-2:#161628;        /* cards / inputs */
  --bg-3:#1F1F36;        /* hover states */
  --bg-4:#2A2A48;

  --tx-1:#F5F5FA;        /* text principal */
  --tx-2:#A5A5B8;        /* text secundari */
  --tx-3:#6B6B82;        /* text terciari */
  --tx-4:#42425A;        /* placeholder, disabled */

  --line:rgba(255,255,255,.08);
  --line-h:rgba(255,255,255,.15);

  --green:#10B981;
  --red:#EF4444;
  --yellow:#F59E0B;

  /* Typography */
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  --fa:'Archivo Black',sans-serif;
  --fm:'Space Mono',monospace;

  /* Spacing */
  --sb:240px;            /* sidebar width */
  --hd:64px;             /* header height */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:24px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  background:var(--bg-0);
  color:var(--tx-1);
  font-family:var(--sf);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
::selection{background:var(--bl);color:#fff;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);}

/* ── Utilities ── */
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.center{align-items:center;justify-content:center;}
.between{justify-content:space-between;}
.gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.gap-5{gap:20px;} .gap-6{gap:24px;} .gap-8{gap:32px;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;}
.mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;}
.mt-8{margin-top:32px;} .mt-10{margin-top:40px;}
.muted{color:var(--tx-2);}
.tiny{font-size:11px;}
.small{font-size:12px;}
.big{font-size:18px;}
.huge{font-size:32px;font-weight:700;letter-spacing:-.02em;}
.mono{font-family:var(--fm);letter-spacing:.04em;}
.label{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;color:var(--tx-3);text-transform:uppercase;}
.dot-sep{display:inline-block;margin:0 6px;color:var(--tx-4);}
.tag{
  display:inline-block;padding:3px 9px;border-radius:100px;
  font-family:var(--fm);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(1,69,242,.14);color:var(--bl-l);border:1px solid rgba(1,69,242,.3);
}
.tag.green{background:rgba(16,185,129,.14);color:var(--green);border-color:rgba(16,185,129,.3);}
.tag.yellow{background:rgba(245,158,11,.14);color:var(--yellow);border-color:rgba(245,158,11,.3);}
.tag.red{background:rgba(239,68,68,.14);color:var(--red);border-color:rgba(239,68,68,.3);}