/* ============================================================
   THE BIG GAME RIVALRY SHOOTOUT — Attendee Companion
   tokens.css — design tokens, transcribed from the design handoff.

   Do not invent values here. Every token below comes from
   design_handoff_attendee_app/README.md or its styles.css.
   ============================================================ */

:root {
  /* --- Brand palette --------------------------------------
     Sampled directly from the approved logo, which is the one
     asset every source agrees on. It appears on the print one
     sheet, the live site, and this app's home screen icon.

     Logo pixel values: red #BA0C2F, navy #002245, gold #F9D147,
     silver #D8D8D8. The live site's red (#C8102E) sits 15 units
     from the logo red; the design handoff's #BB0000 sits 49 away
     and has no blue in it at all. The logo wins.

     Navy and scarlet are TEAM colors. They are used only where
     the content is about a team: the rivalry split, roster card
     borders, and charity bands. The app's own furniture is ink
     and bone so it does not take a side.
     -------------------------------------------------------- */
  --navy:         #002245;
  --navy-deep:    #001529;
  --navy-soft:    #143A63;
  --maize:        #F9D147;
  --maize-dim:    #DDB431;
  --scarlet:      #BA0C2F;
  --scarlet-deep: #8E0923;
  --gray-team:    #D8D8D8;

  /* Sponsor accent, neutral to both teams (burnished bronze) */
  --bronze:       #8C6A3F;
  --bronze-deep:  #4A3520;
  --bronze-light: #B89668;

  /* --- Neutrals ------------------------------------------ */
  --ink:       #0A0A0A;
  --stone-900: #1C1C1C;
  --stone-700: #3A3A3A;
  --stone-500: #6B6B6B;
  --stone-300: #C9C5BC;
  --stone-200: #E5E0D5;
  --stone-100: #EFEBE0;
  --paper:     #FAF7F0;
  --bone:      #F5F1E8;
  --white:     #FFFFFF;

  /* --- Type families ------------------------------------- */
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Display scale (Bebas Neue, uppercase) ------------- */
  --display-hero: clamp(64px, 15vw, 140px);
  --display-1:    clamp(52px, 13vw, 120px);
  --display-2:    clamp(44px, 11vw, 96px);
  --display-3:    clamp(36px, 8vw, 72px);
  --display-4:    clamp(32px, 7vw, 48px);
  --display-5:    clamp(28px, 6vw, 36px);
  --display-6:    28px;
  --display-stat: clamp(56px, 14vw, 88px);
  --display-time: 20px;

  /* --- Body scale (Inter) -------------------------------- */
  --body-lead: 22px;
  --body-lg:   18px;
  --body-base: 17px;
  --body-sm:   15px;
  --body-xs:   14px;
  --caption:   13px;
  --fine:      12px;

  /* --- Layout -------------------------------------------- */
  --maxw:     1440px;
  --pad-x:    20px;
  --pad-y:    60px;
  --header-h: 72px;
  --nav-h:    64px;

  /* --- Motion -------------------------------------------- */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;
}

@media (min-width: 768px) {
  :root {
    --pad-x:    40px;
    --pad-y:    100px;
    --header-h: 80px;
  }
}

/* ============================================================
   SIGNATURE PATTERNS
   ============================================================ */

/* Diagonal hatch, over dark backgrounds only. Always beneath
   content, always pointer-events: none. */
.hatch { position: relative; }
.hatch > * { position: relative; z-index: 1; }
.hatch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 80px,
    rgba(255, 255, 255, 0.025) 80px, rgba(255, 255, 255, 0.025) 81px
  );
}
.hatch--md::before {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 60px,
    rgba(255, 255, 255, 0.04) 60px, rgba(255, 255, 255, 0.04) 61px
  );
}

/* FPO placeholder. Every image without a real asset ships as
   one of these, never a gray box and never stock photography. */
.fpo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--stone-100);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 14px,
    rgba(11, 31, 58, 0.06) 14px, rgba(11, 31, 58, 0.06) 15px
  );
  border: 1px dashed rgba(11, 31, 58, 0.25);
}
.fpo--dark {
  background: var(--navy);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 14px,
    rgba(255, 255, 255, 0.05) 14px, rgba(255, 255, 255, 0.05) 15px
  );
  border-color: rgba(255, 255, 255, 0.18);
}
.fpo__inner {
  padding: 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(11, 31, 58, 0.55);
}
.fpo--dark .fpo__inner { color: rgba(255, 255, 255, 0.55); }
.fpo__label {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(11, 31, 58, 0.4);
}
.fpo--dark .fpo__label { color: rgba(255, 255, 255, 0.4); }