/* Styling based on the tokens from css.hackclub.com/theme.css (dark mode from @hackclub/theme).
   Phantom Sans is licensed for HQ sites only, so this uses the theme's system-font fallback. */
:root {
  --dark: #17171d; --darkless: #252429; --darker: #121217; --black: #1f2d3d; --slate: #3c4858;
  --muted: #8492a6; --smoke: #e0e6ed; --snow: #f9fafc; --white: #fff;
  --red: #ec3750; --orange: #ff8c37; --yellow: #f1c40f; --green: #33d6a6; --cyan: #5bc0de; --blue: #338eda; --purple: #a633d6;

  --text: var(--black); --background: var(--white); --sheet: var(--snow); --elevated: var(--white);
  --sunken: var(--smoke); --border: var(--smoke); --input-border: #c0ccda; --primary: var(--red);

  --shadow-card: 0 4px 8px rgba(0, 0, 0, .125);
  --shadow-elevated: 0 1px 2px rgba(0, 0, 0, .0625), 0 8px 12px rgba(0, 0, 0, .125);
  --gradient: radial-gradient(ellipse farthest-corner at top left, var(--orange), var(--red));
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: var(--white); --background: var(--dark); --sheet: var(--darkless); --elevated: var(--darkless);
    --sunken: var(--darker); --border: var(--slate); --input-border: var(--slate);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--background); color: var(--text);
  font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: 700; line-height: 1.125; margin: 0; }
a { color: var(--primary); text-decoration: underline; text-underline-position: under; }
a:hover, a:focus { text-decoration-style: wavy; text-decoration-skip-ink: none; }
pre, .mono { font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; }

/* Page header */
.page-header { padding: 64px 16px 32px; text-align: center; }
.page-header .eyebrow { color: var(--primary); margin: 0 auto 8px; }
.page-header h1 { font-size: clamp(36px, 7vw, 56px); letter-spacing: -.009em; line-height: 1; }
.page-header p { max-width: 560px; margin: 16px auto 0; font-size: 20px; line-height: 1.375; color: var(--muted); }

.container { max-width: 680px; margin: 0 auto 64px; padding: 0 16px; }
.container.wide { max-width: 1024px; }

/* Cards */
.card { background: var(--elevated); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-card); padding: 32px; }
.card.sunken { background: var(--sunken); box-shadow: none; }
@media (max-width: 520px) { .card { padding: 20px; } }

.eyebrow { color: var(--muted); font-weight: 700; letter-spacing: .009em; text-transform: uppercase; font-size: 14px; margin: 32px 0 8px; }
.caption, .muted { color: var(--muted); }

/* Forms */
label { display: block; font-weight: 700; margin: 16px 0 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: 14px; }
.req { color: var(--primary); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--sheet);
  border: 1px solid var(--input-border); border-radius: 8px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(236, 55, 80, .25); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--primary); }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; color: var(--white); background: var(--primary); border: 0;
  border-radius: 99999px; padding: 4px 14px; margin-right: 12px; cursor: pointer;
}
textarea { min-height: 96px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

/* Buttons: pill-shaped, lift on hover */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 700; letter-spacing: .009em; line-height: 1.5;
  color: var(--white); background: var(--primary); border: 0; border-radius: 99999px;
  padding: 8px 18px; box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform .125s ease-in-out, box-shadow .125s ease-in-out;
}
button:hover, button:focus-visible { transform: scale(1.0625); box-shadow: var(--shadow-elevated); }
button:disabled { opacity: .6; cursor: wait; transform: none; }
button.lg { font-size: 20px; padding: 14px 32px; }
button.cta { background-image: var(--gradient); }
button.block { width: 100%; }
button.outline { background: none; color: var(--primary); box-shadow: none; border: 2px solid currentColor; padding: 6px 16px; }
button.ghost { background: none; color: var(--text); box-shadow: none; border: 2px solid var(--input-border); padding: 6px 16px; }

.error { color: var(--primary); font-weight: 700; margin: 16px 0 0; }
.error:empty { display: none; }

/* Status badges (outline-badge from the theme) */
.badge { display: inline-block; border-radius: 99999px; padding: 2px 12px; font-size: 14px; font-weight: 700; border: 2px solid currentColor; }