/* ============================================================
   VisionCore · Buttons v2 — 3 variant × 3 intent × 3 size = 27 fixed
   Replaces all of:
   - .btn.primary / .btn.outline (legacy in layout.css)
   - .btn-primary / .btn-outline (legacy in components.css)
   - .btn-pill-cyan / .btn-pill-blue / .btn-pill-gradient
   - .btn-pill-accent-outline / .btn-pill-muted / .btn-pill-danger
   - .btn-chip / .btn-chip-accent
   - .btn-gradient-cyan / .btn-gradient-amber / .btn-gradient-violet

   MIGRATION:  data attributes drive variant/intent/size, e.g.
     <button class="vc-btn" data-variant="solid" data-intent="primary">…
     <button class="vc-btn" data-variant="outline" data-intent="danger" data-size="sm">…

   Defaults:  variant=outline · intent=default · size=md
   ============================================================ */

.vc-btn {
  /* base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--vc-font-sans);
  font-size: var(--vc-text-base);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  border-radius: var(--vc-r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--vc-ink);
  cursor: pointer;
  transition: var(--vc-fast);
  outline: 0;
  white-space: nowrap;
}
.vc-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--vc-bg), 0 0 0 4px var(--vc-brand);
}
.vc-btn[disabled],
.vc-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.vc-btn[data-full="true"] { width: 100%; }

/* ---------- SIZES ---------- */
.vc-btn[data-size="sm"] {
  padding: 6px 12px;
  font-size: var(--vc-text-sm);
  border-radius: var(--vc-r-sm);
}
.vc-btn[data-size="lg"] {
  padding: 12px 22px;
  font-size: var(--vc-text-md);
  border-radius: var(--vc-r-md);
}

/* ---------- VARIANT × INTENT MATRIX ----------
   Rule of selector grouping:
   - bare .vc-btn (no variant, no intent)         → outline + default
   - .vc-btn[data-intent=…] alone (no variant)    → outline + that intent
   - .vc-btn[data-variant=…] alone (no intent)    → that variant + default
*/

/* ---- DEFAULT = outline + default (the bare class baseline) ---- */
.vc-btn,
.vc-btn:not([data-variant]):not([data-intent]),
.vc-btn:not([data-variant])[data-intent="default"],
.vc-btn[data-variant="outline"]:not([data-intent]),
.vc-btn[data-variant="outline"][data-intent="default"] {
  border-color: #2c2c2c;
  color: var(--vc-ink-2);
  background: transparent;
}
.vc-btn:hover,
.vc-btn:not([data-variant]):not([data-intent]):hover,
.vc-btn[data-variant="outline"][data-intent="default"]:hover,
.vc-btn[data-variant="outline"]:not([data-intent]):hover {
  border-color: #3a3a3a;
  background: rgba(255,255,255,.03);
}

/* ---- SOLID · default (bare solid → gray, NOT brand) ---- */
.vc-btn[data-variant="solid"],
.vc-btn[data-variant="solid"]:not([data-intent]),
.vc-btn[data-variant="solid"][data-intent="default"] {
  background: #262626;
  border-color: transparent;
  color: var(--vc-ink);
}
.vc-btn[data-variant="solid"]:hover,
.vc-btn[data-variant="solid"][data-intent="default"]:hover { background: #2f2f2f; }

/* ---- SOLID · primary ---- */
.vc-btn[data-variant="solid"][data-intent="primary"] {
  background: var(--vc-brand);
  border-color: transparent;
  color: #fff;
}
.vc-btn[data-variant="solid"][data-intent="primary"]:hover { background: #ff446f; }

/* ---- SOLID · danger ---- */
.vc-btn[data-variant="solid"][data-intent="danger"] {
  background: #3a1115;
  border-color: transparent;
  color: var(--vc-danger-soft);
}
.vc-btn[data-variant="solid"][data-intent="danger"]:hover { background: #4a151a; }

/* ---- OUTLINE · primary (also matches bare data-intent=primary) ---- */
.vc-btn[data-variant="outline"][data-intent="primary"],
.vc-btn:not([data-variant])[data-intent="primary"] {
  border-color: var(--vc-brand-line);
  color: var(--vc-brand-soft);
  background: transparent;
}
.vc-btn[data-variant="outline"][data-intent="primary"]:hover,
.vc-btn:not([data-variant])[data-intent="primary"]:hover {
  background: var(--vc-brand-bg);
  border-color: rgba(255,42,95,.5);
}

/* ---- OUTLINE · danger (also matches bare data-intent=danger) ---- */
.vc-btn[data-variant="outline"][data-intent="danger"],
.vc-btn:not([data-variant])[data-intent="danger"] {
  border-color: rgba(255,68,68,.35);
  color: var(--vc-danger-soft);
  background: transparent;
}
.vc-btn[data-variant="outline"][data-intent="danger"]:hover,
.vc-btn:not([data-variant])[data-intent="danger"]:hover {
  background: var(--vc-danger-bg);
  border-color: rgba(255,68,68,.6);
}

/* ghost · default */
.vc-btn[data-variant="ghost"],
.vc-btn[data-variant="ghost"][data-intent="default"],
.vc-btn[data-variant="ghost"]:not([data-intent]) {
  color: var(--vc-ink-3);
  background: transparent;
  border-color: transparent;
}
.vc-btn[data-variant="ghost"]:hover,
.vc-btn[data-variant="ghost"][data-intent="default"]:hover { color: var(--vc-ink); background: rgba(255,255,255,.04); }

/* ghost · primary */
.vc-btn[data-variant="ghost"][data-intent="primary"] {
  color: var(--vc-brand-soft);
}
.vc-btn[data-variant="ghost"][data-intent="primary"]:hover {
  background: var(--vc-brand-bg);
}

/* ghost · danger */
.vc-btn[data-variant="ghost"][data-intent="danger"] {
  color: var(--vc-danger-soft);
}
.vc-btn[data-variant="ghost"][data-intent="danger"]:hover {
  background: var(--vc-danger-bg);
}

/* ---------- ICON BUTTON (square) ---------- */
.vc-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--vc-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--vc-ink-3);
  cursor: pointer;
  transition: var(--vc-fast);
}
.vc-icon-btn:hover { color: var(--vc-ink); background: rgba(255,255,255,.04); }
.vc-icon-btn[data-active="true"] {
  color: var(--vc-brand-soft);
  background: var(--vc-brand-bg);
  border-color: var(--vc-brand-line);
}
.vc-icon-btn[data-size="sm"] { width: 28px; height: 28px; }

/* ---------- LEGACY MAPPING (auto-migrate existing markup) ----------
   These selectors translate old class names to the new system so
   index.html keeps working during incremental migration.
*/

/* old .btn.primary  →  solid + primary */
.btn.primary {
  background: var(--vc-brand);
  color: #fff;
  border-radius: var(--vc-r-md);
  padding: 9px 16px;
  font-weight: 600;
  border: 0;
}
.btn.primary:hover { background: #ff446f; }

/* old .btn.outline  →  outline + default */
.btn.outline {
  background: transparent;
  border: 1px solid #2c2c2c;
  color: var(--vc-ink-2);
  border-radius: var(--vc-r-md);
  padding: 9px 16px;
  font-weight: 600;
}
.btn.outline:hover { border-color: #3a3a3a; background: rgba(255,255,255,.03); }

/* All the deprecated pill/chip/gradient classes — collapse to default outline.
   Visual regression is intentional: the audit identified them as the noise.
   Designers can promote specific buttons to primary explicitly. */
.btn-pill, .btn-pill-cyan, .btn-pill-blue, .btn-pill-gradient,
.btn-pill-accent-outline, .btn-pill-muted, .btn-pill-danger,
.btn-chip, .btn-chip-accent,
.btn-gradient-cyan, .btn-gradient-amber, .btn-gradient-violet {
  background: transparent !important;
  border: 1px solid #2c2c2c !important;
  color: var(--vc-ink-2) !important;
  border-radius: var(--vc-r-md) !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
/* …except the ones that semantically MUST stay branded */
.btn-pill-danger {
  border-color: rgba(255,68,68,.35) !important;
  color: var(--vc-danger-soft) !important;
}