/* Reusable Components */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  text-decoration: none;
}

.btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hover);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-pressed);
}

.btn-primary {
  background-color: var(--lime);
  color: var(--ink);
}
.btn-primary:hover {
  background-color: #E2FF5C;
}

.btn-secondary {
  background-color: var(--paper-raised);
  color: var(--ink);
}
.btn-secondary:hover {
  background-color: var(--paper-alt);
}

.btn-dark {
  background-color: var(--gradient-dark-surface);
  color: var(--paper);
  border: 2px solid var(--lime);
  box-shadow: var(--shadow-lime);
}
.btn-dark:hover {
  background-color: var(--gradient-dark-elevated);
  box-shadow: var(--shadow-lime-hover);
}
.btn-dark:active {
  box-shadow: var(--shadow-lime-pressed);
}

.btn-github {
  background-color: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.btn-github:hover {
  background-color: var(--ink);
  color: var(--paper);
}

.btn-lg {
  padding: 18px 36px;
  font-size: 16px;
  letter-spacing: 0.8px;
}

.btn-md {
  padding: 12px 24px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* Badges & Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chip-paper {
  background: var(--paper-alt);
  color: var(--ink);
  border: var(--border-thin);
}

.chip-lime {
  background: rgba(214, 255, 56, 0.15);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.chip-dark-lime {
  background: rgba(214, 255, 56, 0.1);
  color: var(--lime);
  border: 1.5px solid var(--lime);
}

/* Hotkey Keyboard Keys */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0px var(--ink);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.kbd-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Neo-Brutalist Cards */
.brutalist-card {
  background-color: var(--paper-raised);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-card);
  padding: 32px;
  position: relative;
  transition: var(--transition-lift);
}

.brutalist-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hover);
}

.brutalist-card.dark {
  background-color: var(--gradient-dark-surface);
  color: var(--paper);
  border: 2px solid var(--lime);
  box-shadow: var(--shadow-lime);
}

.brutalist-card.dark:hover {
  box-shadow: var(--shadow-lime-hover);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 0px var(--ink);
}

.card-icon.lime { background-color: var(--lime); }
.card-icon.yellow { background-color: var(--yellow); }
.card-icon.orange { background-color: var(--orange); }
.card-icon.pink { background-color: var(--pink); }

.card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.25;
}

.card-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.dark .card-desc {
  color: #B5AFA6;
}

/* Authentic FlowState HUD Emblem (SVG) */
.flow-emblem {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
  transition: transform 0.3s ease;
}

.nav-brand:hover .flow-emblem {
  transform: rotate(45deg);
}

/* Interactive HUD Switcher Buttons */
.hud-mode-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hud-mode-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper-raised);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 2px 2px 0px var(--ink);
}

.hud-mode-btn:hover {
  background: var(--paper-alt);
}

.hud-mode-btn.active {
  background: var(--lime);
  color: var(--ink);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--ink);
}

/* Responsive Component Adjustments */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
  .btn-lg {
    padding: 14px 20px;
    font-size: 14px;
    width: 100%;
  }
  .btn-md {
    padding: 10px 18px;
    font-size: 12px;
  }
  .brutalist-card {
    padding: 22px 18px;
    box-shadow: 3px 3px 0px var(--ink);
  }
  .brutalist-card.dark {
    box-shadow: 3px 3px 0px var(--lime);
  }
  .card-title {
    font-size: 18px;
  }
  .card-desc {
    font-size: 14px;
  }
}