/* Button Component (customizable via CSS variables) */

.c-btn{
  --btn-fg: #ffffff;
  --btn-radius: 999px;
  --btn-py: .625rem;
  --btn-px: 1rem;
  --btn-gap: .5rem;
  --btn-weight: 500;
  display:inline-flex;align-items:center;gap:var(--btn-gap);
  border-radius:var(--btn-radius);
  padding:var(--btn-py) var(--btn-px);
  font-weight:var(--btn-weight);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--btn-fg);text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease;
}

.c-btn:disabled{
  cursor:not-allowed;
  opacity:.65;
}

/* Glass variant (with gradient border) */
.c-btn--glass{
  --btn-glass-blur: 12px;
  --btn-glass-sat: 140%;
  --btn-glass-start: rgba(255,255,255,.30);
  --btn-glass-end: rgba(255,255,255,.14);
  --btn-border-start: var(--gold-400);
  --btn-border-end: var(--gold-600);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, var(--btn-glass-start), var(--btn-glass-end)) padding-box,
    linear-gradient(135deg, var(--btn-border-start), var(--btn-border-end)) border-box;
  backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  -webkit-backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.25);
}
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .c-btn--glass{background:
      linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.12)) padding-box,
      linear-gradient(135deg, var(--btn-border-start), var(--btn-border-end)) border-box}
}
.c-btn--glass:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px rgba(0,0,0,.30)}

/* Gold gradient border with solid interior */
.c-btn--border-gold{
  --btn-surface: var(--surface);
  --btn-border-start: var(--gold-400);
  --btn-border-end: var(--gold-600);
  border:1px solid transparent;
  background:
    linear-gradient(var(--btn-surface), var(--btn-surface)) padding-box,
    linear-gradient(135deg, var(--btn-border-start), var(--btn-border-end)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.24)
}
.c-btn--border-gold:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.28)}

/* Diamond (losango) gold button */
.c-btn--diamond{
  /* Size and colors */
  --btn-d-size: 2.75rem;                 /* min height */
  --btn-d-bg-start: rgba(250,204,21,.90); /* gold fill start */
  --btn-d-bg-end: rgba(217,119,6,.80);    /* gold fill end */
  --btn-d-border-start: var(--gold-400);
  --btn-d-border-end: var(--gold-600);
  --btn-d-shadow: 0 12px 20px rgba(0,0,0,.35);

  color:#0b1020; /* dark text on gold */
  font-weight:800;
  padding: .875rem 2.25rem; /* wider for text like Register */
  border-radius:0;
  border:1px solid transparent;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    linear-gradient(180deg, var(--btn-d-bg-start), var(--btn-d-bg-end)) padding-box,
    linear-gradient(135deg, var(--btn-d-border-start), var(--btn-d-border-end)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--btn-d-shadow);
}
.c-btn--diamond:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 26px rgba(0,0,0,.42)
}
@supports not (clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%)){
  .c-btn--diamond{border-radius:12px} /* graceful fallback */
}