/* Sistema de diseño del ecosistema NoLabel — anclado en Backstage (la app más pulida).
   Fuente de verdad: docs/superpowers/specs/2026-06-30-ecosystem-design-system.md
   Extraído de ~/Develop/bandsync/lib/theme/app_colors.dart + app_type.dart.
   Monocromático frío + un acento coral. SpaceGrotesk (títulos) + Inter (cuerpo). Redondeo 12px. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Color (dark) */
  --bg:#0B0B0C; --surface:#161618; --surface-2:#202023;
  --border:rgba(255,255,255,.07); --divider:rgba(255,255,255,.05);
  --text:#F5F5F6; --muted:#8A8A90;
  --accent:#DF6043; --on-accent:#FFFFFF;        /* coral; texto blanco sobre coral */
  --danger:#E5484D; --success:#3ECF8E; --warning:#E8A33D;
  --chip-bg:#202023; --chip-text:#C9C9CF;

  /* Tipografía */
  --font-display:'Space Grotesk',system-ui,sans-serif;  /* títulos, 600/700, tracking negativo */
  --font-body:'Inter',system-ui,sans-serif;             /* cuerpo, 400/500 */

  /* Radios */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);

  /* Alias de nombres legacy (la boletera/sitio usaban estos). Apuntan al sistema nuevo
     para que el reskin sea gradual sin romper CSS existente. */
  --amber:var(--accent); --amber-ink:var(--on-accent);
  --text-dim:var(--muted); --line:var(--border);
  --font-hero:var(--font-display);
}

/* ── Botones (sistema compartido, redondeado, acento coral) ───────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1;
  border:1px solid transparent;border-radius:var(--r);padding:14px 20px;min-height:48px;
  transition:transform .08s var(--ease),background .15s var(--ease),border-color .15s var(--ease),filter .15s var(--ease)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default;transform:none;filter:none}
.btn--lg{font-size:17px;padding:16px 24px;min-height:54px}
.btn--block{width:100%}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover:not(:disabled){filter:brightness(1.07)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn--secondary:hover{border-color:var(--muted)}

/* Accesibilidad: reduced-motion en todo el ecosistema. */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}