/* arew landing page.
   Design tokens and component styling are lifted from the arew design system
   (see root.html, the React/Babel prototype this page was built from). The
   prototype rendered in-browser via Babel; this is the same design as plain
   static HTML/CSS so the page is one small request and works without JS. */

/* -------------------------------- tokens --------------------------------
   Light is the default; dark follows the OS unless [data-theme] pins it. */

:root {
  /* core — light (contrast on Paper) */
  --paper: #FBFBF9;            /* page background */
  --ink: #12151A;              /* primary text, 17.7:1 */
  --muted: #5A626E;            /* secondary text, 6.0:1 */
  --line: #E2E2DD;             /* 1px hairlines */
  --lane: #EFEFEA;             /* lane fills, wells, code blocks */
  --accent: #2F5BEA;           /* the `a`, links, focus, 5.3:1 */
  --on-accent: #FFFFFF;        /* text on accent fill, 5.5:1 */
  /* status — text-safe (labels on tint bg) */
  --status-todo-text: #5A626E;     /* 6.0:1 */
  --status-doing-text: #7A4A00;    /* 7.2:1 */
  --status-done-text: #136B4A;     /* 6.3:1 */
  --status-blocked-text: #A32A16;  /* 7.0:1 */
  /* status — tint backgrounds */
  --status-todo-tint: #EFEFEA;
  --status-doing-tint: #FBF1DE;
  --status-done-tint: #E9F4EF;
  --status-blocked-tint: #FBECE8;
  /* semantic aliases */
  --surface-page: var(--paper);
  --surface-well: var(--lane);
  --surface-card: var(--paper);
  --text-body: var(--ink);
  --text-secondary: var(--muted);
  --border-hairline: var(--line);
  --focus-ring: var(--accent);

  /* type */
  --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --type-body: 16px;
  --type-label: 11px;
  --track-label: 0.12em;

  /* spacing + shape — 8px base unit, hairlines never scale */
  --radius-card: 8px;
  --radius-chip: 6px;
  --hairline: 1px solid var(--border-hairline);

  /* motion — everything is 120–180ms, one curve */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-base: 160ms;

  /* page frame */
  --gutter: clamp(24px, 5vw, 64px);
}

/* Dark values live in one declaration list, applied by OS preference and by
   an explicit [data-theme="dark"] opt-in. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0C0E12;            /* page background is Ink */
    --ink: #F2F3F0;              /* 17.3:1 */
    --muted: #9AA2AE;            /* 7.5:1 */
    --line: #22262E;
    --lane: #171B21;
    --accent: #6E8CFF;           /* 6.3:1 */
    --on-accent: #0C0E12;
    --status-todo-text: #9AA2AE;
    --status-doing-text: #F0A93B;
    --status-done-text: #3FCB93;
    --status-blocked-text: #FF7A63;
    --status-todo-tint: #171B21;
    --status-doing-tint: #211B10;
    --status-done-tint: #10211A;
    --status-blocked-tint: #241412;
  }
}
[data-theme='dark'] {
  --paper: #0C0E12;
  --ink: #F2F3F0;
  --muted: #9AA2AE;
  --line: #22262E;
  --lane: #171B21;
  --accent: #6E8CFF;
  --on-accent: #0C0E12;
  --status-todo-text: #9AA2AE;
  --status-doing-text: #F0A93B;
  --status-done-text: #3FCB93;
  --status-blocked-text: #FF7A63;
  --status-todo-tint: #171B21;
  --status-doing-tint: #211B10;
  --status-done-tint: #10211A;
  --status-blocked-tint: #241412;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-base: 0ms; }
}

/* ------------------------------- elements ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.u-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Skip link — visible only once focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
}
.skip:focus {
  left: 8px;
  z-index: 1;
  padding: 8px 16px;
  border-radius: var(--radius-chip);
  background: var(--surface-card);
  border: var(--hairline);
}

/* -------------------------------- header -------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 64px;
  padding: 8px var(--gutter);
  background: var(--surface-page);
  border-bottom: var(--hairline);
}

.wordmark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-body);
  letter-spacing: -0.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark .a { color: var(--accent); }

/* The nav wordmark is the hero one's understudy: hidden while the big mark is
   on screen, faded in once it scrolls past. It keeps its box either way, so
   the nav never reflows. Without JS the .js class is absent and it just
   stays visible. */
.js .nav .wordmark {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base);
}
.js .nav.is-pinned .wordmark {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a.u-label:hover { color: var(--text-body); }

/* -------------------------------- buttons -------------------------------
   Same geometry as the design system's Button: 40px tall (32px at sm),
   mono 500, 8px radius, one 160ms transition. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              filter var(--dur-base) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--sm { height: 32px; padding: 0 16px; font-size: 12px; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn--primary:hover { filter: brightness(0.92); }

.btn--secondary {
  background: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-hairline);
}
.btn--secondary:hover { background: var(--surface-well); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover { color: var(--text-body); }

/* --------------------------------- hero ---------------------------------
   Four columns — four letters, four lanes. Copy takes the first two, the
   sample board the last two; below 960px they stack. */

main { flex: 1; }

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 64px);
}

.hero__copy {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Wordmark and its definition sit tight together above the headline. */
.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hero__mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-body);
}
.hero__mark .a { color: var(--accent); }
.hero__mark .rew { color: var(--text-body); }

.hero__copy h1 {
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lede {
  margin: 0;
  max-width: 44ch;
  font-size: 17px;
  color: var(--text-secondary);
}

.cta { display: flex; flex-wrap: wrap; gap: 8px; }

/* Signup state — the server sets data-signups on <html>. With registration
   closed the CTAs give way to a single "coming soon" marker. */
[data-signups='closed'] .when-open,
[data-signups='open'] .when-closed { display: none; }

.coming-soon {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-card);
  background: var(--surface-well);
  border: var(--hairline);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ----------------------------- sample board ----------------------------- */

.board {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lane {
  background: var(--surface-well);
  border-radius: var(--radius-card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lane__name { padding: 0 8px; }

.card {
  background: var(--surface-card);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-body);
}

.pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  background: var(--status-todo-tint);
  color: var(--status-todo-text);
}
.pill__glyph { font-size: 8px; }

.pill--doing { background: var(--status-doing-tint); color: var(--status-doing-text); }
.pill--done { background: var(--status-done-tint); color: var(--status-done-text); }
.pill--blocked { background: var(--status-blocked-tint); color: var(--status-blocked-text); }

/* -------------------------------- footer -------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 0 var(--gutter) 48px;
  font-size: 13px;
  color: var(--text-secondary);
}
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--text-body); }
/* Sits to the right on a wide footer; stacks under the definition once the
   two no longer fit on one line (see the 620px breakpoint). */
.footer__legal { margin-left: auto; }

/* ------------------------------ breakpoints ------------------------------ */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__copy,
  .board { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 16px; }
  .nav-links { gap: 16px; }
  /* Wrapping left the copyright pushed to the right on its own line; stack
     the two lines flush left instead, definition first. */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer__legal { margin-left: 0; }
}

@media (max-width: 380px) {
  .board { grid-template-columns: 1fr; }
  .cta .btn { flex: 1 1 100%; }
}