/* =========================================================
   CYRTIX ACADEMY — BUTTON COMPONENT SYSTEM (CX Tokens v4)
   Fully token-driven • zero hardcoded colors • unified naming
=========================================================== */

/* ---------------------------------------------------------
   BASE BUTTON
--------------------------------------------------------- */
.cx-btn {
  /* Component Tokens */
  --btn-padding-x: var(--cx-space-4);
  --btn-padding-y: var(--cx-space-2);
  --btn-font-size: var(--cx-text-base);
  --btn-font-weight: var(--cx-weight-semibold);
  --btn-radius: var(--cx-radius-md);
  --btn-border-width: var(--cx-border-width);
  --btn-transition: all var(--cx-duration-base) var(--cx-ease-standard);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-space-2);

  padding: var(--btn-padding-y) var(--btn-padding-x);

  font-family: var(--cx-font-heading);
  font-size: var(--btn-font-size);
  line-height: var(--cx-leading-none);
  font-weight: var(--btn-font-weight);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-decoration: none;

  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid transparent;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--btn-transition);

  position: relative;
  overflow: hidden;

  outline-offset: 2px;
}

/* =========================================================
   PRIMARY BUTTON — CYBER CRIMSON
========================================================= */
.cx-btn--primary {
  background: var(--cx-grad-crimson);
  color: #fff;
  border: none;
  box-shadow: var(--cx-shadow-md), var(--cx-glow-crimson-soft);
}

.cx-btn--primary:hover {
  background: var(--cx-grad-crimson-bright);
  box-shadow: var(--cx-shadow-lg), var(--cx-glow-crimson);
  transform: translateY(-2px);
}

.cx-btn--primary:active {
  background: var(--cx-crimson-600);
  box-shadow: var(--cx-shadow-sm);
  transform: translateY(0);
}

.cx-btn--primary:focus-visible {
  outline: var(--cx-focus-width) solid var(--cx-crimson-400);
  outline-offset: var(--cx-focus-offset);
}

/* =========================================================
   SECONDARY BUTTON — ELECTRIC CYAN OUTLINE
========================================================= */
.cx-btn--secondary {
  background: transparent;
  color: var(--cx-cyan-400);
  border: var(--cx-border-width-thick) solid var(--cx-cyan-400);
  box-shadow: var(--cx-glow-cyan-soft);
}

.cx-btn--secondary:hover:not(:disabled) {
  background: var(--cx-cyan-soft);
  color: #fff;
  box-shadow: var(--cx-glow-cyan);
  transform: translateY(-2px);
}

.cx-btn--secondary:active:not(:disabled) {
  background: var(--cx-cyan-200);
  border-color: var(--cx-cyan-500);
  transform: translateY(0);
}

/* =========================================================
   TERTIARY — CRIMSON OUTLINE
========================================================= */
.btn-tertiary {
  background: transparent;
  color: var(--cx-crimson-400);
  border: var(--cx-border-width-thick) solid var(--cx-crimson-400);
  box-shadow: var(--cx-glow-crimson-soft);
}

.btn-tertiary:hover:not(:disabled) {
  background: var(--cx-crimson-soft);
  color: #fff;
  box-shadow: var(--cx-glow-crimson);
  transform: translateY(-2px);
}

/* =========================================================
   GHOST BUTTON — Neutral subtle
========================================================= */
.btn-ghost {
  background: transparent;
  color: var(--cx-slate-300);
  border: var(--cx-border-width) solid var(--cx-steel-600);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--cx-steel-700);
  border-color: var(--cx-steel-500);
  color: var(--cx-slate-100);
  transform: translateY(-2px);
}

/* =========================================================
   DANGER BUTTON (SYSTEM ERROR COLOR)
========================================================= */
.btn-danger {
  background: var(--cx-error-500);
  color: #fff;
  box-shadow: var(--cx-shadow-md);
  border: none;
}

.btn-danger:hover:not(:disabled) {
  background: var(--cx-error-600);
  box-shadow: var(--cx-shadow-lg);
  transform: translateY(-2px);
}

/* =========================================================
   BUTTON SIZES
========================================================= */
.btn-xs {
  --btn-padding-x: var(--cx-space-2);
  --btn-padding-y: var(--cx-space-1);
  --btn-font-size: var(--cx-text-xs);
  --btn-radius: var(--cx-radius-sm);
}

.btn-sm {
  --btn-padding-x: var(--cx-space-3);
  --btn-padding-y: var(--cx-space-1);
  --btn-font-size: var(--cx-text-sm);
  --btn-radius: var(--cx-radius-sm);
}

.btn-lg {
  --btn-padding-x: var(--cx-space-6);
  --btn-padding-y: var(--cx-space-3);
  --btn-font-size: var(--cx-text-lg);
  --btn-radius: var(--cx-radius-lg);
}

.btn-xl {
  --btn-padding-x: var(--cx-space-8);
  --btn-padding-y: var(--cx-space-4);
  --btn-font-size: var(--cx-text-xl);
  --btn-radius: var(--cx-radius-xl);
  font-weight: var(--cx-weight-bold);
}

/* =========================================================
   CRIMSON GLOW ANIMATION (Showcase CTA)
========================================================= */
.btn-glow-crimson {
  animation: cx-pulse-crimson 2s infinite ease-in-out;
}

@keyframes cx-pulse-crimson {
  0%, 100% {
    box-shadow: var(--cx-shadow-md), var(--cx-glow-crimson-soft);
  }
  50% {
    box-shadow: var(--cx-shadow-md), var(--cx-glow-crimson);
  }
}

/* =========================================================
   CYBER NEON BUTTON — futuristic glow
========================================================= */
.btn-neon {
  position: relative;
  background: var(--cx-steel-900);
  color: var(--cx-cyan-400);
  border: var(--cx-border-width) solid transparent;
}

.btn-neon::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--cx-grad-cyber-neon);
  border-radius: calc(var(--btn-radius) + 1px);
  opacity: 0.5;
  z-index: -1;
  transition: opacity var(--cx-duration-base);
}

.btn-neon:hover::before {
  opacity: 0.85;
}


/* Outline */
.cx-btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--cx-slate-50);
}
.cx-btn--outline:hover { background: rgba(255,255,255,0.02); transform: translateY(-2px); }

/* Full width */
.cx-w-full { width: 100%; display: inline-flex; }

/* Small / compact buttons */
.cx-btn--sm { padding: .35rem .6rem; font-size: .9rem; }

/* Disabled */
.cx-btn[disabled], .cx-btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }




.cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cx-space-2);
    padding: var(--cx-space-4) var(--cx-space-8);
    border-radius: var(--cx-radius-lg);
    font-family: var(--cx-font-display);
    font-size: var(--cx-text-base);
    font-weight: var(--cx-weight-semibold);
    text-decoration: none;
    border: none;
    transition: all var(--cx-duration-base) var(--cx-easing-standard);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    outline: none;
    line-height: 1;
}

.cx-btn:focus-visible {
    outline: 2px solid var(--cx-cyan-500);
    outline-offset: 2px;
}

.cx-btn-primary {
    background: var(--cx-grad-crimson);
    color: white;
    box-shadow: 
        var(--cx-shadow-md),
        0 0 30px var(--cx-crimson-a30);
}

.cx-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        var(--cx-shadow-lg),
        0 0 40px var(--cx-crimson-a40);
}

.cx-btn-primary:active {
    transform: translateY(-1px);
}

.cx-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cx-slate-100);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cx-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--cx-shadow-md);
}

.cx-btn-lg {
    padding: var(--cx-space-5) var(--cx-space-10);
    font-size: var(--cx-text-lg);
    min-height: 56px;
}

.cx-btn-glow-crimson {
    animation: cx-pulse-crimson 3s infinite ease-in-out;
}




.cx-btn:focus-visible {
    outline: 2px solid var(--cx-cyan-500);
    outline-offset: 2px;
}

.cx-btn-primary {
    background: var(--cx-grad-crimson);
    color: white;
    box-shadow: 
        var(--cx-shadow-md),
        0 0 30px var(--cx-crimson-a30);
}

.cx-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        var(--cx-shadow-lg),
        0 0 40px var(--cx-crimson-a40);
}

.cx-btn-primary:active {
    transform: translateY(-1px);
}

.cx-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cx-slate-100);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cx-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--cx-shadow-md);
}

.cx-btn-lg {
    padding: var(--cx-space-5) var(--cx-space-10);
    font-size: var(--cx-text-lg);
    min-height: 56px;
}

.cx-btn-glow-crimson {
    animation: cx-pulse-crimson 3s infinite ease-in-out;
}