/* ============================
   VYO Buttons (global skin)
   Opt-in via: body[data-vyo-buttons="1"]
   Escape hatch: add .btn-legacy to keep old look
   ============================ */

body[data-vyo-buttons="1"]{
  --vyo-btn-radius: 14px;
  --vyo-btn-font: 900;
  --vyo-btn-pad-y: .55rem;
  --vyo-btn-pad-x: .9rem;

  --vyo-btn-bg: rgba(255,255,255,.05);
  --vyo-btn-bg-hover: rgba(255,255,255,.08);
  --vyo-btn-border: var(--border, rgba(255,255,255,.10));
  --vyo-btn-text: var(--text, #f4f6fb);
  --vyo-btn-muted: var(--text-muted, rgba(255,255,255,.65));

  --vyo-accent: var(--vyo-accent, var(--accent, var(--primary, #7c5cff)));
}

/* light theme */
html[data-theme="light"] body[data-vyo-buttons="1"]{
  --vyo-btn-bg: rgba(0,0,0,.03);
  --vyo-btn-bg-hover: rgba(0,0,0,.05);
  --vyo-btn-border: rgba(0,0,0,.10);
  --vyo-btn-text: var(--text, #111);
  --vyo-btn-muted: rgba(0,0,0,.60);
}

/* Base */
body[data-vyo-buttons="1"] .btn:not(.btn-legacy){
  border-radius: var(--vyo-btn-radius);
  font-weight: var(--vyo-btn-font);
  letter-spacing: .15px;
  padding: var(--vyo-btn-pad-y) var(--vyo-btn-pad-x);
  border: 1px solid var(--vyo-btn-border);
  background: var(--vyo-btn-bg);
  color: var(--vyo-btn-text);
  box-shadow: none !important;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

body[data-vyo-buttons="1"] .btn:not(.btn-legacy):hover{
  background: var(--vyo-btn-bg-hover);
  transform: translateY(-1px);
}

body[data-vyo-buttons="1"] .btn:not(.btn-legacy):focus,
body[data-vyo-buttons="1"] .btn:not(.btn-legacy):focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vyo-accent) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--vyo-accent) 55%, transparent);
}

/* Sizes keep Bootstrap sizing intent */
body[data-vyo-buttons="1"] .btn-sm:not(.btn-legacy){
  padding: .45rem .75rem;
  border-radius: 12px;
  font-weight: 900;
}
body[data-vyo-buttons="1"] .btn-lg:not(.btn-legacy){
  padding: .75rem 1.05rem;
  border-radius: 16px;
}

/* Variants */
body[data-vyo-buttons="1"] .btn-primary:not(.btn-legacy){
  background: var(--vyo-accent);
  border-color: color-mix(in srgb, var(--vyo-accent) 55%, transparent);
  color: #fff;
}
body[data-vyo-buttons="1"] .btn-primary:not(.btn-legacy):hover{
  filter: brightness(1.05);
}

body[data-vyo-buttons="1"] .btn-outline-primary:not(.btn-legacy){
  background: transparent;
  border-color: color-mix(in srgb, var(--vyo-accent) 55%, transparent);
  color: color-mix(in srgb, var(--vyo-accent) 80%, white);
}
body[data-vyo-buttons="1"] .btn-outline-primary:not(.btn-legacy):hover{
  background: color-mix(in srgb, var(--vyo-accent) 18%, transparent);
  color: var(--vyo-btn-text);
}

body[data-vyo-buttons="1"] .btn-outline-secondary:not(.btn-legacy){
  background: transparent;
  color: var(--vyo-btn-muted);
}
body[data-vyo-buttons="1"] .btn-outline-secondary:not(.btn-legacy):hover{
  color: var(--vyo-btn-text);
}

body[data-vyo-buttons="1"] .btn-outline-danger:not(.btn-legacy){
  background: transparent;
  border-color: rgba(255,90,90,.35);
  color: rgba(255,190,190,.95);
}
body[data-vyo-buttons="1"] .btn-outline-danger:not(.btn-legacy):hover{
  background: rgba(255,90,90,.10);
  color: rgba(255,235,235,1);
}

body[data-vyo-buttons="1"] .btn-outline-success:not(.btn-legacy){
  background: transparent;
  border-color: rgba(40,200,130,.30);
  color: rgba(190,255,230,.95);
}
body[data-vyo-buttons="1"] .btn-outline-success:not(.btn-legacy):hover{
  background: rgba(40,200,130,.10);
  color: rgba(235,255,248,1);
}

/* Don’t mess with btn-link */
body[data-vyo-buttons="1"] .btn-link:not(.btn-legacy){
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Input groups: keep radii clean */
body[data-vyo-buttons="1"] .input-group > .btn:not(.btn-legacy){
  border-radius: 12px;
}