/* ==========================================================================
   Keycap 3D Button System
   Translated from iOS Keycap3DButtonStyle.swift to pure CSS.
   Uses 3-layer structure: shadow base → gradient body → highlight overlay.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base .keycap — 3-layer structure
   
   Layer stack (bottom to top):
     1. Element itself — solid shadow color, acts as visible "shadow" depth
     2. ::after — gradient body (the main button face)
     3. ::before — highlight gloss (white→transparent on top half)
     4. <span> content — text label (z-index above pseudo-elements)
   -------------------------------------------------------------------------- */

.keycap {
  /* --- Custom property defaults (overridden by variant classes) --- */
  --keycap-top: #FAFAFC;
  --keycap-bottom: #E0E3E8;
  --keycap-shadow: #8C9199;
  --keycap-text: #26262E;
  --keycap-depth: 3px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-medium);
  line-height: 1;
  color: var(--keycap-text);
  background: var(--keycap-shadow);
  padding: 0 24px;
  height: 48px;
  border-radius: var(--corner-radius);
  /* Extra bottom padding to reveal shadow layer below body */
  padding-bottom: var(--keycap-depth);
  /* Spring-feel transition on transform */
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
  /* Remove default button styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Touch optimizations */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* --- Layer 2: Gradient body (::after) --- */
.keycap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Stop short at the bottom by shadow-depth to reveal shadow layer */
  bottom: var(--keycap-depth);
  background: linear-gradient(to bottom, var(--keycap-top), var(--keycap-bottom));
  border-radius: inherit;
  /* Transition for hover brightness */
  transition: filter 0.15s ease;
}

/* --- Layer 3: Highlight gloss (::before) --- */
.keycap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Cover only top half of the body (not the shadow) */
  height: calc((100% - var(--keycap-depth)) * 0.5);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20),
    transparent
  );
  border-radius: inherit;
  /* Clip bottom corners — top-only rounding */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Above the gradient body */
  z-index: 1;
  pointer-events: none;
}

/* --- Button text must sit above pseudo-elements --- */
.keycap > span,
.keycap > .keycap-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Shift up by half the depth so text is centered on the body, not the full element */
  transform: translateY(calc(var(--keycap-depth) * -0.5));
}

/* --------------------------------------------------------------------------
   Color Variants
   -------------------------------------------------------------------------- */

/* Primary (white) — secondary actions */
.keycap-primary {
  --keycap-top: #FAFAFC;
  --keycap-bottom: #E0E3E8;
  --keycap-shadow: #8C9199;
  --keycap-text: #26262E;
}

/* Secondary (gray) — tertiary actions */
.keycap-secondary {
  --keycap-top: #595E66;
  --keycap-bottom: #40454D;
  --keycap-shadow: #262B33;
  --keycap-text: #FFFFFF;
}

/* Accent (green) — primary CTA */
.keycap-accent {
  --keycap-top: #4DD980;
  --keycap-bottom: #2E9459;
  --keycap-shadow: #1A5933;
  --keycap-text: #FFFFFF;
}

/* Orange — attention actions */
.keycap-orange {
  --keycap-top: #FF8C33;
  --keycap-bottom: #E6661A;
  --keycap-shadow: #99400D;
  --keycap-text: #FFFFFF;
}

/* Gold — premium indicators */
.keycap-gold {
  --keycap-top: #FFD94D;
  --keycap-bottom: #E6A626;
  --keycap-shadow: #99730D;
  --keycap-text: #33260D;
}

/* Destructive (red) — destructive actions */
.keycap-destructive {
  --keycap-top: #F25959;
  --keycap-bottom: #BF3333;
  --keycap-shadow: #801A1A;
  --keycap-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Size Variants
   -------------------------------------------------------------------------- */

/* Small */
.keycap-sm {
  height: 36px;
  font-size: 13px;
  padding: 0 16px;
  padding-bottom: 2px;
  border-radius: var(--corner-radius-sm);
  --keycap-depth: 2px;
}

/* Medium (default — values set in base .keycap) */
.keycap-md {
  height: 48px;
  font-size: 15px;
  padding: 0 24px;
  padding-bottom: 3px;
  border-radius: var(--corner-radius);
  --keycap-depth: 3px;
}

/* Large */
.keycap-lg {
  height: 56px;
  font-size: 17px;
  padding: 0 32px;
  padding-bottom: 4px;
  border-radius: 14px;
  --keycap-depth: 4px;
}

/* --------------------------------------------------------------------------
   Shape Variants
   -------------------------------------------------------------------------- */

/* Capsule — pill-shaped */
.keycap-capsule {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Interaction States
   -------------------------------------------------------------------------- */

/* Hover — lift up slightly, brighten the body */
.keycap:hover:not(:disabled) {
  transform: translateY(-1px);
}

.keycap:hover:not(:disabled)::after {
  filter: brightness(1.08);
}

/* Active — press down into the shadow, flatten depth */
.keycap:active:not(:disabled) {
  transform: translateY(var(--keycap-depth)) scale(0.98);
}

.keycap:active:not(:disabled)::after {
  /* Shadow collapses — body extends to bottom */
  bottom: 0;
}

.keycap:active:not(:disabled)::before {
  /* Highlight stays proportional to new body height */
  height: calc(100% * 0.5);
}

.keycap:active:not(:disabled) > span,
.keycap:active:not(:disabled) > .keycap-label {
  /* Reset the Y offset since depth collapsed */
  transform: translateY(0);
}

/* Focus-visible — keyboard focus ring */
.keycap:focus-visible {
  outline: 2px solid var(--color-accent, #59D975);
  outline-offset: 2px;
}

/* Disabled */
.keycap:disabled,
.keycap[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .keycap {
    transition: none;
  }

  .keycap::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Keycap Badges — Non-interactive capsule indicators
   Same 3-layer visual structure as buttons, but no hover/active/focus.
   -------------------------------------------------------------------------- */

.keycap-badge {
  --keycap-depth: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  line-height: 1;
  color: var(--keycap-text, #FFFFFF);
  background: var(--keycap-shadow, #262B33);
  padding: 0 12px;
  height: 28px;
  padding-bottom: var(--keycap-depth);
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
  /* Non-interactive */
  pointer-events: none;
  cursor: default;
}

/* Badge gradient body */
.keycap-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--keycap-depth);
  background: linear-gradient(to bottom, var(--keycap-top, #595E66), var(--keycap-bottom, #40454D));
  border-radius: inherit;
}

/* Badge highlight */
.keycap-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc((100% - var(--keycap-depth)) * 0.5);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20),
    transparent
  );
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1;
  pointer-events: none;
}

/* Badge text */
.keycap-badge > span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateY(calc(var(--keycap-depth) * -0.5));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Pro badge — gold variant */
.keycap-badge-pro {
  --keycap-top: #FFD94D;
  --keycap-bottom: #E6A626;
  --keycap-shadow: #99730D;
  --keycap-text: #33260D;
}

/* Free badge — gray variant */
.keycap-badge-free {
  --keycap-top: #595E66;
  --keycap-bottom: #40454D;
  --keycap-shadow: #262B33;
  --keycap-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Keycap Chips — Interactive capsule toggles
   Same 3-layer structure with selected/unselected states.
   -------------------------------------------------------------------------- */

.keycap-chip {
  --keycap-depth: 2px;
  /* Unselected: gray/subtle */
  --keycap-top: #3A3F47;
  --keycap-bottom: #2A2F37;
  --keycap-shadow: #1A1F27;
  --keycap-text: #CCCCCC;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  line-height: 1;
  color: var(--keycap-text);
  background: var(--keycap-shadow);
  padding: 0 16px;
  height: 34px;
  padding-bottom: var(--keycap-depth);
  border-radius: 999px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Chip gradient body */
.keycap-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--keycap-depth);
  background: linear-gradient(to bottom, var(--keycap-top), var(--keycap-bottom));
  border-radius: inherit;
  transition: filter 0.15s ease;
}

/* Chip highlight */
.keycap-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc((100% - var(--keycap-depth)) * 0.5);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1;
  pointer-events: none;
}

/* Chip text */
.keycap-chip > span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateY(calc(var(--keycap-depth) * -0.5));
}

/* Chip interaction states */
.keycap-chip:hover {
  transform: translateY(-1px);
}

.keycap-chip:hover::after {
  filter: brightness(1.1);
}

.keycap-chip:active {
  transform: translateY(var(--keycap-depth)) scale(0.97);
}

.keycap-chip:active::after {
  bottom: 0;
}

.keycap-chip:focus-visible {
  outline: 2px solid var(--color-accent, #59D975);
  outline-offset: 2px;
}

/* Selected state — accent green */
.keycap-chip--selected {
  --keycap-top: #4DD980;
  --keycap-bottom: #2E9459;
  --keycap-shadow: #1A5933;
  --keycap-text: #FFFFFF;
  font-weight: var(--font-weight-semibold, 600);
}

/* --------------------------------------------------------------------------
   Reduced Motion — Chips
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .keycap-chip {
    transition: none;
  }

  .keycap-chip::after {
    transition: none;
  }
}