/* GamePilot — shared tokens and primitives.
   Palette is fixed by the brand; themes only reassign roles. */

:root {
  /* brand constants — never themed */
  --navy: #12284B;
  --blue: #1E88E5;
  --blue-lt: #42A5F5;
  --yellow: #E4F03C;
  --red: #D7263D;
  --white: #ffffff;

  /* light theme roles */
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eaf1fa;
  --text: #12284B;
  --text-muted: #4a5c78;
  --line: rgba(18, 40, 75, 0.14);
  --accent: #1565b8;
  --band: #12284B;
  --band-text: #e8f1fb;
  --band-muted: #a9c2e2;
  --shadow: 0 1px 2px rgba(18, 40, 75, .06), 0 8px 24px rgba(18, 40, 75, .08);

  /* type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 4px spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #081527;
    --surface: #0f2340;
    --surface-2: #14304f;
    --text: #e8f1fb;
    --text-muted: #9db4d4;
    --line: rgba(232, 241, 251, 0.16);
    --accent: #6cb6f5;
    --band: #0b1d36;
    --band-text: #e8f1fb;
    --band-muted: #9db4d4;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .34);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing: every img carries width/height attributes so the
   browser can reserve the box, and without it the attribute height wins over the
   capped width and the aspect ratio breaks. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover { color: var(--blue); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--blue-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s4);
}

@media (min-width: 720px) {
  .wrap { padding-inline: var(--s5); }
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--yellow);
  color: var(--navy);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  font-weight: 600;
  z-index: 10;
}
.skip:focus { left: var(--s4); }

/* ---- brand primitives ---- */

/* four-point compass star, used as a bullet and as texture */
.star { width: 12px; height: 12px; flex: none; fill: var(--blue); }

/* Softball seam: a row of slanted stitches, the one ornament on the site.
   One stitch tiled with repeat-x, not a repeating-linear-gradient — a gradient
   slices the first and last stroke in half at the box edge, and a half stitch
   reads as a stray comma. The width is an exact multiple of the 9px tile.
   Red is stitch red #D7263D, baked in because a data URI cannot take a token. */
.seam {
  height: 10px;
  width: 54px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10'%3E%3Cpath d='M6.4 1.4 L2.6 8.6' stroke='%23D7263D' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s3);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
}
.lockup img { width: 30px; height: 30px; }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--yellow);
  color: var(--navy);
}
.btn-primary:hover { background: #eef85c; color: var(--navy); }

.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* on the navy band */
.on-band .btn-ghost { color: var(--band-text); }
.on-band .btn-ghost:hover { background: rgba(232, 241, 251, .1); color: var(--band-text); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}