/* ==========================================================================
   WorldHop — brand foundation. THE single source of truth.
   ==========================================================================

   Loaded FIRST by every page on worldhop.app (marketing site, /club, /usa).
   Everything below is site-wide: fonts, the brand palette, and the base
   typographic rules. Page-specific stylesheets load AFTER this file and may
   override layout, but must NOT redeclare :root colours or @font-face —
   that is what caused the site to drift into eight different palettes.

   If you need to change a brand colour, change it HERE, once.

   Fonts are self-hosted (assets/fonts/*.woff2) rather than loaded from the
   Google Fonts CDN, so every page — including print sheets that render
   offline — gets identical type with no third-party request.
   ========================================================================== */

/* ---------- Type ---------------------------------------------------------- */

@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/LilitaOne-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */

:root {
  /* Brand palette — "Arcade Atlas". These match the WorldHop app (splash
     background #061D3B) and every <meta name="theme-color"> on the site. */
  --night:      #061D3B;
  --night-deep: #020B17;
  --navy:       #0C2340;
  --navy-2:     #15335A;
  --ocean:      #0C315C;

  --teal:       #24B8A6;
  --teal-d:     #167F77;
  --orange:     #F26322;
  --orange-d:   #B4531A;
  --mango:      #FFBE22;

  --sky:        #58B9FF;
  --cobalt:     #1769D2;
  --leaf:       #72B947;
  --violet:     #7A68D8;

  --cream:      #FFF1D2;
  --paper:      #F7EFDE;
  --white:      #FFFDF7;
  --ink:        #122131;
  --muted:      #67717A;
  --stone:      #8D8B82;
  --line:       #E4D5B9;

  /* Legacy aliases — older stylesheets reference these names. Kept so nothing
     breaks; prefer the canonical names above in new code. */
  --teal-dark:   var(--teal-d);
  --orange-dark: var(--orange-d);

  /* Type */
  --font-display: "Lilita One", system-ui, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw:   1180px;
  --max:    var(--maxw);          /* alias used by /club */
  --radius: 22px;
  --shadow: 0 18px 50px rgba(6, 29, 59, .15);
  --hard:   0 7px 0 #08182A;
}

/* ---------- Base ---------------------------------------------------------- */

* { box-sizing: border-box; }

body { font-family: var(--font-body); }

img { display: block; max-width: 100%; }

a { color: inherit; }

/* Headings take the display face by ELEMENT, not by class. This is the rule
   that stops a heading silently falling back to body text when someone
   forgets to add class="display" — which is exactly how the /usa page
   shipped with the wrong font. `.display` is kept as an alias for the
   markup that already uses it. */
h1, h2, h3,
.display {
  font-family: var(--font-display);
  font-weight: 400;
}

.display { text-transform: uppercase; }

/* ---------- App store badge -----------------------------------------------
   .appstore is THE store-badge component. It was previously declared three
   times — book-page.css, styles.css, and an inline <style> in index.html —
   which is why the footer badges I first wrote here looked nothing like the
   ones in the hero. It belongs in this file because this is the only
   stylesheet every page loads, including /terms which loads nothing else.

   Values are book-page.css's, verbatim. The later sheets re-declare the same
   thing, so nothing moves on the pages that already had it.
   ------------------------------------------------------------------------- */
.appstore{
  display:flex; align-items:center; gap:10px;
  background:var(--night-deep); color:var(--cream); text-decoration:none;
  border:2px solid rgba(244,233,211,.35); border-radius:14px; padding:10px 18px;
  box-shadow:0 7px 0 #02070e, 0 13px 22px rgba(0,0,0,.25);
  transition:transform .15s ease; cursor:pointer;
}
.appstore:hover{transform:translateY(-2px)}
.appstore svg{width:26px;height:26px;flex:0 0 auto}
.appstore .apple{fill:currentColor}
.appstore .gplay{width:24px;height:26px;flex:none}
.appstore .t{display:flex;flex-direction:column;line-height:1.15}
.appstore .t small,.appstore .t strong{white-space:nowrap}
.appstore .t small{font-size:10px;opacity:.75;font-weight:700}
.appstore .t strong{font-family:var(--font-display);font-size:16px;font-weight:400;text-transform:none}

/* The footer pair. Layout only — the badges themselves are .appstore, so the
   footer, the hero and the app band are the same component everywhere.

   `.footer .store-badges a` (0,2,1) is needed because styles.css has a blanket
   `.footer a{display:inline-block;margin:0 9px 8px}` inside its <=980px media
   query (0,1,1) that would otherwise break the flex row on mobile. Same reason
   `.footer .social a` is written that way. */
.store-badges{
  display:flex; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap; margin:0 auto 24px; padding:0 16px;
}
.footer .store-badges a{display:flex; margin:0; opacity:1}
@media (max-width:430px){
  .store-badges{gap:10px; padding:0 10px}
  .footer .store-badges a{padding:9px 13px; gap:8px}
  .appstore .t strong{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .appstore{transition:none}
  .appstore:hover{transform:none}
}