/* Global premium button system - patch 0.1.4.0.0
   Public buttons are CSS-driven, not image-driven, so they remain fast, editable, accessible, and theme aware. */
:root{
  --btn-radius:16px;
  --btn-pad-y:13px;
  --btn-pad-x:24px;
  --btn-font:850;
  --btn-letter:.035em;
  --btn-primary-text:#f8fbff;
  --btn-secondary-text:var(--text);
  --btn-edge:rgba(255,255,255,.16);
  --btn-edge-strong:rgba(255,255,255,.28);
  --btn-depth:0 14px 30px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.22);
  --btn-depth-hover:0 18px 42px rgba(0,0,0,.44), inset 0 1px 2px rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.25);
  --btn-blue-glow:0 0 0 rgba(93,137,255,0);
  --btn-primary-bg:
    linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 42%,rgba(0,0,0,.22) 100%),
    linear-gradient(135deg,#5d89ff 0%,#4f46e5 52%,#1d4ed8 100%);
  --btn-secondary-bg:
    linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.045) 48%,rgba(0,0,0,.18) 100%),
    linear-gradient(135deg,#2f3744 0%,#151a22 100%);
  --btn-ghost-bg:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
}

html[data-theme="light"]{
  --btn-primary-text:#ffffff;
  --btn-secondary-text:#111827;
  --btn-edge:rgba(15,23,42,.16);
  --btn-edge-strong:rgba(15,23,42,.25);
  --btn-depth:0 12px 26px rgba(15,23,42,.14), inset 0 1px 1px rgba(255,255,255,.88), inset 0 -1px 0 rgba(15,23,42,.12);
  --btn-depth-hover:0 16px 36px rgba(37,99,235,.22), inset 0 1px 2px rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,23,42,.14);
  --btn-primary-bg:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 44%,rgba(0,0,0,.16) 100%),
    linear-gradient(135deg,#2563eb 0%,#4f46e5 58%,#1e40af 100%);
  --btn-secondary-bg:
    linear-gradient(180deg,#ffffff 0%,#eef4ff 48%,#d9e4f3 100%);
  --btn-ghost-bg:linear-gradient(180deg,rgba(255,255,255,.82),rgba(241,245,249,.72));
}

button,.btn,.nav-toggle{
  appearance:none;
  -webkit-appearance:none;
}

.btn,button.btn,.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  border-radius:var(--btn-radius);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:1px solid var(--btn-edge);
  color:var(--btn-secondary-text);
  font-weight:var(--btn-font);
  letter-spacing:var(--btn-letter);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:translateY(0) translateZ(0);
  transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,filter .28s ease,border-color .28s ease,background .28s ease,color .28s ease;
  box-shadow:var(--btn-depth);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

.btn::before,.nav-toggle::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.035) 40%,rgba(0,0,0,.18));
  pointer-events:none;
}

.btn::after,.nav-toggle::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-95%;
  width:58%;
  height:240%;
  z-index:1;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 22%,rgba(255,255,255,.56) 50%,rgba(255,255,255,.10) 72%,transparent 100%);
  transform:skewX(-22deg) translateX(-20%);
  opacity:.55;
  pointer-events:none;
  transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
}

.btn:hover,.nav-toggle:hover{
  transform:translateY(-2px) translateZ(0);
  border-color:var(--btn-edge-strong);
  box-shadow:var(--btn-depth-hover),0 0 24px rgba(93,137,255,.14);
  filter:brightness(1.07) saturate(1.04);
}

.btn:hover::after,.nav-toggle:hover::after{
  transform:skewX(-22deg) translateX(390%);
  opacity:.9;
}

.btn:active,.nav-toggle:active{
  transform:translateY(1px) scale(.992);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.28),0 7px 18px rgba(0,0,0,.22);
  filter:brightness(.98);
}

.btn:active::after,.nav-toggle:active::after{
  transform:skewX(-22deg) translateX(190%);
  opacity:.82;
}

.btn > *, .nav-toggle > *{position:relative;z-index:2}

.btn.primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border-color:rgba(255,255,255,.22);
}

.btn.secondary,.nav-toggle{
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-text);
}

.btn.ghost{
  background:var(--btn-ghost-bg);
  color:var(--text);
  border-color:var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.12);
}

.btn.precision{
  border-radius:10px;
  text-transform:uppercase;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#0f1115;
  border-color:#2d3748;
  color:#f5f5f5;
  box-shadow:0 10px 28px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.03);
}
.btn.precision:hover{border-color:#5d89ff;box-shadow:0 0 20px rgba(93,137,255,.18),0 14px 32px rgba(0,0,0,.44)}

.btn.glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.22);
}

.btn.is-selected,.btn[aria-pressed="true"]{
  outline:3px solid color-mix(in srgb,var(--orange) 72%,transparent);
  outline-offset:3px;
  border-color:var(--orange);
}

html[data-motion="reduced"] .btn,html[data-motion="reduced"] .nav-toggle{transition:none}
html[data-motion="reduced"] .btn::after,html[data-motion="reduced"] .nav-toggle::after{transition:none;display:none}
html[data-motion="reduced"] .btn:hover,html[data-motion="reduced"] .nav-toggle:hover{transform:none}