/* Hack Club Brand Colors and Theme */
:root {
  /* Hack Club Colors */
  --hc-darker: #121217;
  --hc-dark: #17171d;
  --hc-darkless: #252429;
  --hc-black: #1f2d3d;
  --hc-steel: #273444;
  --hc-slate: #3c4858;
  --hc-muted: #8492a6;
  --hc-smoke: #e0e6ed;
  --hc-snow: #f9fafc;
  --hc-white: #ffffff;
  --hc-red: #ec3750;
  --hc-orange: #ff8c37;
  --hc-yellow: #f1c40f;
  --hc-green: #33d6a6;
  --hc-cyan: #5bc0de;
  --hc-blue: #338eda;
  --hc-purple: #a633d6;
  --hc-primary: #ec3750;

  /* Shadows */
  --hc-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625), 0 2px 4px rgba(0, 0, 0, 0.0625);
  --hc-shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
  --hc-shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625), 0 8px 12px rgba(0, 0, 0, 0.125);

  /* Border radius */
  --hc-radii-small: 4px;
  --hc-radii-default: 8px;
  --hc-radii-extra: 12px;
  --hc-radii-circle: 99999px;
}

/* Hack Club primary button style */
.btn-hc-primary {
  background-color: var(--hc-red);
  color: white;
  font-weight: 700;
  border-radius: var(--hc-radii-circle);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--hc-shadow-card);
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-hc-primary:hover,
.btn-hc-primary:focus {
  box-shadow: var(--hc-shadow-elevated);
  transform: scale(1.0625);
}

/* Hack Club outline button */
.btn-hc-outline {
  background-color: transparent;
  color: var(--hc-red);
  font-weight: 700;
  border: 2px solid var(--hc-red);
  border-radius: var(--hc-radii-circle);
  padding: 0.75rem 1.5rem;
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-hc-outline:hover,
.btn-hc-outline:focus {
  box-shadow: var(--hc-shadow-card);
  transform: scale(1.0625);
}

/* Hack Club card styles */
.card-hc {
  background-color: var(--hc-white);
  border-radius: var(--hc-radii-extra);
  box-shadow: var(--hc-shadow-card);
  padding: 1.5rem;
  overflow: hidden;
}

.card-hc-sunken {
  background-color: var(--hc-smoke);
  border-radius: var(--hc-radii-extra);
  padding: 1.5rem;
}

.card-hc-interactive {
  background-color: var(--hc-white);
  border-radius: var(--hc-radii-extra);
  box-shadow: var(--hc-shadow-card);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform 0.125s ease-in-out, box-shadow 0.125s ease-in-out;
  text-decoration: none;
}

.card-hc-interactive:hover,
.card-hc-interactive:focus {
  transform: scale(1.0625);
  box-shadow: var(--hc-shadow-elevated);
}

/* Text colors */
.text-hc-red { color: var(--hc-red); }
.text-hc-orange { color: var(--hc-orange); }
.text-hc-green { color: var(--hc-green); }
.text-hc-blue { color: var(--hc-blue); }
.text-hc-muted { color: var(--hc-muted); }

/* Background colors */
.bg-hc-red { background-color: var(--hc-red); }
.bg-hc-dark { background-color: var(--hc-dark); }
.bg-hc-darker { background-color: var(--hc-darker); }
.bg-hc-snow { background-color: var(--hc-snow); }
.bg-hc-smoke { background-color: var(--hc-smoke); }

.turbo-progress-bar { background-color: var(--hc-red); }

/* Stripe-style sidebar navigation */
.nav-item {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  color: var(--hc-muted);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}
.nav-item-active {
  border-left-color: var(--hc-red);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.nav-item svg {
  margin-right: 10px;
  flex-shrink: 0;
  opacity: 0.75;
}
.nav-item-active svg {
  opacity: 1;
}

/* Stripe-style search trigger */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 240px;
}
.search-trigger:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.search-trigger kbd {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9ca3af;
  background: #e5e7eb;
  border-radius: 4px;
}

/* Header icon buttons */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #6b7280;
  transition: all 0.15s ease;
}
.header-icon-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Sidebar section label */
.nav-section-label {
  padding: 0 12px;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}