/*
 * theme.css — IRONYARD. Concrete paper + hazard orange, brutalist: sharp
 * corners (radius 0 everywhere), thick black outlines, hard offset shadows
 * with no blur. Opens light; the dark set below is a different palette
 * (iron ground, paper ink, the same hazard orange), not an inversion.
 */

:root {
  --canvas: #ece8de;
  --surface: #f6f5f0;
  --surface-2: #ecd9c8;
  --border: #141311;
  --border-strong: #141311;
  --ink: #141311;
  --muted: #62605b;
  --accent: #ff4b12;
  --accent-hover: #e0400c;
  --accent-ink: #141311;
  --accent-text: #a8310d;
  --accent-strong: #a8310d;
  --accent-soft: #fbdccb;
  --accent-border: #a8310d;
  --success: #2f6b2f;
  --success-ink: #f6f5f0;
  --success-soft: #d9e6d3;
  --success-strong: #21501f;
  --warning: #c8961a;
  --warning-ink: #141311;
  --warning-soft: #f3e2ae;
  --warning-strong: #6b4d0c;
  --danger: #b91c1c;
  --danger-ink: #f6f5f0;
  --danger-soft: #f0d3d0;
  --danger-strong: #8f1414;
  --chart-1: #ff4b12;
  --chart-2: #141311;
  --chart-3: #c8961a;
  --chart-4: #62605b;
  --chart-5: #a8310d;
  --chart-6: #2f6b2f;

  --font-display: "Anton", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: 0em;
  --eyebrow-tracking: 0.1em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 3px;
  --shadow-card: 6px 6px 0 0 var(--ink);
  --shadow-raised: 9px 9px 0 0 var(--ink);
  --shadow-btn: 4px 4px 0 0 var(--ink);
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.04em;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #161310;
  --surface: #201b15;
  --surface-2: #2d2116;
  --border: #ece8de;
  --border-strong: #ece8de;
  --ink: #ece8de;
  --muted: #a79f8e;
  --accent: #ff4b12;
  --accent-hover: #ff6a3a;
  --accent-ink: #141311;
  --accent-text: #ff8459;
  --accent-strong: #ff8459;
  --accent-soft: #3d2013;
  --accent-border: #ff4b12;
  --success: #3f8a3f;
  --success-ink: #10160e;
  --success-soft: #1f2c1a;
  --success-strong: #86c27f;
  --warning: #d9a52a;
  --warning-ink: #161310;
  --warning-soft: #362a10;
  --warning-strong: #edc35f;
  --danger: #d5453f;
  --danger-ink: #ece8de;
  --danger-soft: #33130f;
  --danger-strong: #ef8a80;
  --chart-1: #ff4b12;
  --chart-2: #ece8de;
  --chart-3: #d9a52a;
  --chart-4: #a79f8e;
  --chart-5: #ff8459;
  --chart-6: #86c27f;
}

/*
 * app.css — IRONYARD's own rules. Loaded after design.css and theme.css, so
 * everything here wins. Colour is built from tokens only (var(--x) or a
 * color-mix over one) — never a literal — so both modes stay correct.
 *
 * THE ONE MOVING THING is the hazard-tape marquee (the brief's marquee motion
 * id). Nothing else on the page animates on scroll.
 */

/* ---- Ground: warm concrete paper, a faint aggregate texture ------------- */
body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    radial-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 34px 34px, 22px 22px;
  background-position: 0 0, 11px 17px;
}

/* ---- Full-screen drawer (the nav's own dialog) --------------------------- */
.drawer {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  background: var(--ink);
  color: var(--canvas);
  border: 0;
  padding: 0;
  box-shadow: none;
}
.drawer::backdrop { background: color-mix(in srgb, var(--ink) 70%, transparent); }
.drawer-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.05;
  color: var(--canvas);
  display: block;
}
.drawer-link:hover { color: var(--accent); text-decoration: none; }

/* ---- Hazard tape marquee (the page's one continuous motion) -------------- */
.hazard-tape {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 28px,
    var(--ink) 28px 56px
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html.reduced-motion .marquee-track { animation: none; }

/* ---- Hero: a dark scrim built from the ink token, not a literal ---------- */
.hero-scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 45%, transparent) 45%,
    color-mix(in srgb, var(--ink) 0%, transparent) 80%
  );
}

/* ---- This Week's WOD: a real grid, mono type, hairline rules ------------- */
.wod-grid {
  display: grid;
  grid-template-columns: 5.5rem repeat(7, minmax(6.5rem, 1fr));
  min-width: 56rem;
}
.wod-cell {
  border-bottom: var(--border-w) solid var(--border);
  border-right: var(--border-w) solid var(--border);
  padding: 0.65rem 0.6rem;
}
.wod-grid > .wod-cell:nth-child(8n) { border-right: 0; }
.wod-time {
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--surface-2);
}
.wod-head {
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
  border-right-color: var(--ink);
}
.wod-strength {
  background: color-mix(in srgb, var(--warning) 30%, var(--surface));
}
.wod-off {
  color: var(--muted);
}

/* ---- Reviews: horizontal snap-scroll strip -------------------------------- */
.review-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.review-card {
  scroll-snap-align: start;
  flex: 0 0 min(20rem, 82vw);
}
.review-strip::-webkit-scrollbar { height: 8px; }
.review-strip::-webkit-scrollbar-thumb { background: var(--ink); }
.review-strip::-webkit-scrollbar-track { background: var(--surface-2); }

/* ---- Coach photo rows: full-bleed, not boxed ------------------------------ */
.coach-row img { filter: grayscale(0.1) contrast(1.05); }

/* ---- Membership: the middle tier stands taller with a hazard border ------ */
.tier-featured {
  border-width: var(--border-strong-w) !important;
  border-image: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--ink) 10px 20px) 6;
}

@media (width < 40rem) {
  .wod-grid { min-width: 46rem; }
}