/* ─────────────────────────────────────────────────────────
   Scribbly · Little League · Design tokens & base
   ───────────────────────────────────────────────────────── */

:root {
  /* Scribbly brand */
  --brand: #2E47F0;        /* royal blue */
  --brand-deep: #1E32C4;
  --brand-ink: #0B1340;

  /* Sports accents */
  --red: #D8232A;
  --red-deep: #B01219;
  --navy: #0B1E4F;
  --gold: #E8B833;

  /* Surfaces */
  --cream: #F7F2E8;
  --cream-2: #EFE7D5;
  --paper: #FAF6EC;
  --ink: #15171F;
  --ink-2: #2A2D38;
  --muted: #6B6E7B;
  --line: #E2DBC9;

  /* Type */
  --f-display: "Anton", "Bebas Neue", Impact, sans-serif;
  --f-script: "Caveat Brush", "Caveat", cursive;
  --f-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(11,19,64,.06), 0 4px 14px -6px rgba(11,19,64,.12);
  --shadow-md: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -12px rgba(11,19,64,.18), 0 30px 60px -28px rgba(11,19,64,.25);
  --shadow-lg: 0 24px 60px -20px rgba(11,19,64,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); }
body { font-family: var(--f-sans); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

/* ───── Page chrome ───── */
.app { min-height: 100vh; }
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(247, 242, 232, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(11,19,64,.06);
}
.bar-l, .bar-r { display: flex; align-items: center; gap: 22px; }
.bar-link { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.bar-link:hover { color: var(--brand); }
.brand-logo { height: 28px; }
.bar-promo {
  font-size: 13px; font-weight: 600; color: var(--brand);
  letter-spacing: 0.02em;
}
.bar-strip {
  background: var(--brand); color: white;
  text-align: center; font-size: 13px; font-weight: 500;
  padding: 8px 14px; letter-spacing: 0.02em;
}
.bar-strip b { font-weight: 700; }

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand); color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(46,71,240,.55);
}
.btn-primary:hover { background: var(--brand-deep); }

.btn-red {
  background: var(--red); color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(216,35,42,.55);
}
.btn-red:hover { background: var(--red-deep); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(11,19,64,.18);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn-dark {
  background: var(--navy); color: white;
}
.btn-dark:hover { background: var(--brand-ink); }

.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-sm { padding: 10px 16px; font-size: 13px; }

/* ───── Typography ───── */
.display { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.005em; line-height: 0.95; }
.stencil { font-family: var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.eyebrow { font-family: var(--f-sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand); }
.script { font-family: var(--f-script); font-weight: 400; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* ───── Container ───── */
.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 28px; }

/* ───── Tags / pills ───── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  background: white; color: var(--brand);
  border: 1px solid rgba(46,71,240,.18);
}
.pill-red { background: var(--red); color: white; border-color: transparent; }
.pill-navy { background: var(--navy); color: white; border-color: transparent; }
.pill-cream { background: var(--cream-2); color: var(--navy); border-color: transparent; }

/* ───── Star rating ───── */
.stars { display: inline-flex; gap: 2px; color: #F5B400; font-size: 16px; }

/* ───── Card ───── */
.card {
  background: white; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* ───── Section dividers ───── */
.divider-stripes {
  height: 12px;
  background:
    repeating-linear-gradient(
      135deg,
      var(--red) 0 18px,
      var(--cream) 18px 22px,
      var(--brand) 22px 40px,
      var(--cream) 40px 44px
    );
}

/* ───── Halftone bg utility ───── */
.halftone {
  background-image: radial-gradient(rgba(11,30,79,.15) 1px, transparent 1.4px);
  background-size: 10px 10px;
}
.halftone-red {
  background-image: radial-gradient(rgba(216,35,42,.22) 1px, transparent 1.4px);
  background-size: 8px 8px;
}

/* ───── Inputs ───── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.input, .textarea {
  width: 100%;
  padding: 14px 16px;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: inherit; font-size: 15px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(46,71,240,.12);
}
.textarea { min-height: 96px; resize: vertical; }

/* ───── Marquee ───── */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex; gap: 56px;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.marquee-track > * { flex: 0 0 auto; }
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 18px 0;
  background: white;
}

/* ───── Stadium-strip border (for hero) ───── */
.stadium-strip {
  position: relative; display: inline-block;
  padding: 4px 14px;
  font-family: var(--f-display); letter-spacing: .04em;
  background: var(--navy); color: white;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

/* ───── Generic animation ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp .5s ease both; }

@keyframes pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* ───── Scrollbar-safe selection styling ───── */
::selection { background: var(--brand); color: white; }