/* Eliabi Pereira — brand system (W1, 25/09/2026)
   Single source of the site's design tokens and shared components.
   site.css imports this file first, so the tokens below are the same ones the
   home, books and game pages already used (moved here unchanged).
   New components use the "b-" prefix so they never collide with the page
   classes in site.css (.btn, .card, .badge…). Pages adopt them in G4.
   Style guide: /styleguide.html (noindex, not in the sitemap). */

/* ---------- tokens (moved verbatim from site.css) ---------- */
:root{
  --ink:#16222E;
  --ink-deep:#0D1821;
  --ink-soft:#4E5A66;
  --paper:#FAFAF8;
  --paper-2:#F2F3F1;
  --ice-1:#DFEEF6;
  --ice-2:#C6E0EF;
  --yellow:#FFD028;
  --red:#E8182B;
  --line:#D8DBD8;
  --line-dark:#26333E;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hand:'Caveat',cursive;
  --pad:clamp(20px,5vw,80px);
}

/* ---------- new tokens (additive: nothing on the current pages reads them) ---------- */
:root{
  /* status colours, all AA on --paper (see contrast table in the style guide) */
  --ok:#1E7A45;
  --warn:#8A5A00;
  --error:#B3121F;
  --info:#1F5F8B;
  --muted-on-dark:#93A4B2;

  /* spacing scale (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;

  /* radii (the values the site already uses) */
  --r-xs:3px;--r-sm:4px;--r:8px;--r-md:10px;--r-lg:12px;--r-pill:999px;

  /* type scale */
  --t-xs:.72rem;--t-sm:.875rem;--t-base:1rem;--t-md:1.15rem;--t-lg:1.5rem;
  --t-xl:clamp(2rem,4.6vw,3.6rem);--t-2xl:clamp(2.6rem,7.2vw,5.6rem);
  --lh-tight:.92;--lh-body:1.65;

  /* focus ring */
  --focus:var(--yellow);--focus-halo:var(--ink);

  /* reading mode (game text and long reading) */
  --read-bg:#0D1821;
  --read-surface:#16222E;
  --read-ink:#E9EEF2;
  --read-muted:#93A4B2;
  --read-accent:#FFD028;
  --read-line:#26333E;
  --read-size:18px;
  --read-lh:1.7;
}

/* ---------- reading mode scope ---------- */
.b-read{
  background:var(--read-bg);color:var(--read-ink);
  font-family:var(--body);font-size:var(--read-size);line-height:var(--read-lh);
  --b-fg:var(--read-ink);--b-soft:var(--read-muted);--b-bg:var(--read-bg);--b-surface:var(--read-surface);
  --b-line:var(--read-line);--focus-halo:var(--read-bg);
}
.b-read p{max-width:62ch}

/* component defaults (light) */
.b-scope,.b-nav,.b-btn,.b-card,.b-badge,.b-eyebrow,.b-field,.b-notice,.b-footer{
  --b-fg:var(--ink);--b-soft:var(--ink-soft);--b-bg:var(--paper);--b-surface:#fff;--b-line:var(--line);
}
.b-read .b-nav,.b-read .b-btn,.b-read .b-card,.b-read .b-badge,.b-read .b-eyebrow,.b-read .b-field,.b-read .b-notice,.b-read .b-footer{
  --b-fg:var(--read-ink);--b-soft:var(--read-muted);--b-bg:var(--read-bg);--b-surface:var(--read-surface);--b-line:var(--read-line);
}

/* ---------- focus: yellow ring with an ink halo so it shows on light and dark ---------- */
.b-btn:focus-visible,.b-nav a:focus-visible,.b-card a:focus-visible,.b-input:focus-visible,.b-footer a:focus-visible,.b-focus:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 7px var(--focus-halo);
}

/* ---------- nav ---------- */
.b-nav{display:flex;align-items:center;gap:var(--s-6);min-height:64px;padding:0 var(--s-5);
  background:var(--b-bg);color:var(--b-fg);border-bottom:1px solid var(--b-line)}
.b-nav .b-logo{display:flex;align-items:center;gap:var(--s-3);font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;color:inherit;text-decoration:none}
.b-nav .b-logo i{width:34px;height:34px;border-radius:var(--r-md);background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-style:normal;font-weight:900}
.b-nav ul{display:flex;gap:var(--s-5);margin:0 0 0 auto;padding:0;list-style:none;font-weight:500}
.b-nav ul a{color:inherit;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.b-nav ul a:hover,.b-nav ul a[aria-current="page"]{border-color:var(--yellow)}

/* ---------- button ---------- */
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;
  border:0;border-radius:var(--r);font:600 .98rem/1.2 var(--body);text-decoration:none;cursor:pointer;
  background:var(--ink);color:#fff;transition:transform .12s ease}
.b-btn:active{transform:translateY(1px)}
.b-btn--yellow{background:var(--yellow);color:var(--ink)}
.b-btn--red{background:#C8101F;color:#fff}
.b-btn--ghost{background:transparent;color:var(--b-fg);box-shadow:inset 0 0 0 1.5px currentColor}
.b-btn[disabled],.b-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.b-read .b-btn:not(.b-btn--ghost):not(.b-btn--red){background:var(--read-accent);color:var(--ink-deep)}

/* ---------- card ---------- */
.b-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--b-surface);color:var(--b-fg);border:1px solid var(--b-line)}
.b-card>.b-badge,.b-card>.b-btn{align-self:flex-start}
.b-card h3{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.1;text-transform:none;letter-spacing:-.01em;margin:0}
.b-card p{color:var(--b-soft);line-height:1.6;margin:0}
.b-card .b-card-media{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ice-2)}
.b-card .b-card-media img{width:100%;height:100%;object-fit:cover}

/* ---------- badge ---------- */
.b-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-xs);
  font:700 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);color:var(--ink)}
.b-badge--ink{background:var(--ink);color:#fff}
.b-badge--line{background:transparent;color:var(--b-fg);box-shadow:inset 0 0 0 1px var(--b-line)}
.b-read .b-badge--ink{background:var(--read-ink);color:var(--ink-deep)}

/* ---------- eyebrow ---------- */
.b-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 var(--s-4);
  font:500 .72rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--b-soft)}
.b-eyebrow::before{content:'';width:12px;height:12px;background:var(--yellow);flex:none}

/* ---------- form ---------- */
.b-field{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--s-4);color:var(--b-fg)}
.b-label{font-weight:600;font-size:.95rem}
.b-hint{font-size:.85rem;color:var(--b-soft)}
.b-input{min-height:44px;padding:10px 14px;border-radius:var(--r);border:1.5px solid #6B7782;
  background:var(--b-surface);color:var(--b-fg);font:400 1rem/1.4 var(--body)}
.b-read .b-input{border-color:#5E7080}
.b-input[aria-invalid="true"]{border-color:var(--error)}
.b-error{font-size:.85rem;font-weight:600;color:var(--error)}
.b-read .b-error{color:#FF8A94}
.b-check{display:flex;align-items:flex-start;gap:10px;font-size:.95rem}
.b-check input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin-top:2px}

/* ---------- notice ---------- */
.b-notice{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);border-left:4px solid var(--info);
  background:#EAF2F8;color:var(--ink);line-height:1.5}
.b-notice strong{display:block}
.b-notice--ok{border-color:var(--ok);background:#E6F3EB}
.b-notice--warn{border-color:#C98A00;background:#FFF5D6}
.b-notice--error{border-color:var(--error);background:#FBE7E9}
.b-read .b-notice{background:var(--read-surface);color:var(--read-ink)}

/* ---------- footer ---------- */
.b-footer{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:22px var(--s-5) 30px;
  border-top:1px solid var(--b-line);background:var(--b-bg);color:var(--b-soft);
  font:400 .7rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.b-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}


/* ======================================================================
   Site shell (G4): the navigation used on every page, moved here from
   site.css unchanged, plus the resets it needs on pages without site.css.
   ====================================================================== */
:where(.nav){font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
:where(.nav) *{box-sizing:border-box;margin:0}
:where(.nav) a{color:inherit;text-decoration:none}
:where(.nav) button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,250,248,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:32px;height:74px;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.01em;text-transform:uppercase}
.logo i{
  width:38px;height:38px;border-radius:10px;background:var(--ink);
  color:var(--yellow);display:grid;place-items:center;
  font-style:normal;font-size:1.25rem;font-weight:900;flex:none;
}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-links a{padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--yellow)}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red);color:#fff;font-weight:600;font-size:.9rem;
  padding:11px 20px;border-radius:8px;
}
.pill svg{flex:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;place-items:center}
.burger span,.burger span::before,.burger span::after{content:'';display:block;width:18px;height:2px;background:var(--ink)}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(4px)}
.mobile{display:none;border-bottom:1px solid var(--line);background:var(--paper);padding:8px var(--pad) 22px}
.mobile.open{display:block}
.mobile a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem}
.nav-links a[aria-current="page"]{border-color:var(--yellow)}
@media (max-width:880px){.nav-links,.pill{display:none}.burger{display:grid;margin-left:auto}.nav-in{gap:16px}}
@media (max-width:620px){.logo{font-size:1rem}}

/* site footer band for pages without the big contact section */
.site-footer{background:var(--ink-deep);color:#fff;font-family:var(--body);margin-top:0}
.site-footer .site-footer-in{max-width:1320px;margin:0 auto;padding:40px var(--pad) 0}
.site-footer-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 32px;padding:0;list-style:none}
.site-footer-links a{color:#DCE5EB;text-decoration:underline;text-decoration-color:#DCE5EB66;text-underline-offset:4px;font-weight:500;font-size:.95rem}
.site-footer-links a:hover{text-decoration-color:var(--yellow)}
.site-footer .foot{border-top:1px solid var(--line-dark);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:#9eadb8}
.site-footer a:focus-visible,.nav a:focus-visible,.nav button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.b-btn{transition:none}}
@media (max-width:620px){.b-nav{flex-wrap:wrap;gap:var(--s-3);padding:var(--s-3) var(--s-4)}.b-nav ul{margin:0;flex-wrap:wrap;gap:var(--s-4)}}