/* 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); }