/* CALIBRE Play - design system (2026-10-07)
   One deliberate look: a dark indigo playmat, the card art as the brightest thing
   on screen, Pokémon-style type colours used as accents (never big fills).
   Loaded last in <head> on every page. Selectors are prefixed with "html body"
   where they must beat the parent templates' own inline <style> blocks. */

:root {
  /* palette */
  --play-bg: #121429;          /* page */
  --play-mat: #241f48;         /* hero playmat */
  --play-mat-dot: rgba(255, 214, 79, .08);
  --play-card: #1c1f3c;        /* panels */
  --play-card-2: #232750;      /* raised panels / inputs */
  --play-line: rgba(242, 242, 251, .14);
  --play-ink: #f2f2fb;         /* text */
  --play-muted: #a9abc9;
  --play-faint: #9699bf;      /* >= 4.5:1 on page, panel and input backgrounds */
  --play-electric: #e3c15f;    /* type colours, softened for the dark ground */
  --play-water: #6f9de0;
  --play-fire: #ec7656;        /* the one action colour */
  --play-fire-ink: #f29a7f;    /* readable link colour on dark */
  --play-grass: #5bb98a;
  --play-psychic: #d77aa6;
  --play-ghost: #7b6fc2;
  --play-on: #17162b;          /* text on a coloured fill */
  --play-shadow: 0 5px 0 rgba(0, 0, 0, .45);
  /* type */
  --f-display: "Dela Gothic One", "Arial Black", Impact, system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-brand: "Genos", "Arial Narrow", system-ui, sans-serif;
  --play-r: 16px;

  /* the parent theme's token names, re-pointed so existing page CSS follows */
  --ink: var(--play-ink);
  --paper: var(--play-bg);
  --accent: var(--play-fire);
  --accent-dark: var(--play-fire-ink);
  --muted: var(--play-muted);
  --line: var(--play-line);
  --good: var(--play-grass);
  --card: var(--play-card);
  --bg: var(--play-bg);
  --fg: var(--play-ink);
  color-scheme: dark;
}

html body {
  background: var(--play-bg) !important;
  color: var(--play-ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
html body h1, html body h2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--play-ink);
  text-wrap: balance;
}
html body h3, html body h4 { font-family: var(--f-body); font-weight: 800; color: var(--play-ink); }
html body p, html body li { color: inherit; }
html body a { color: var(--play-fire-ink); }
html body a:hover { color: #ffb8a2; }
html body ::selection { background: rgba(236, 118, 86, .35); color: #fff; }
html body :focus-visible { outline: 3px solid var(--play-water); outline-offset: 3px; }
html body code, html body kbd, html body .mono { font-family: var(--f-data); }
html body hr { border: 0; border-top: 1px solid var(--play-line); }

/* ── shared navigation (parent partials/brand-nav.php; markup and script unchanged) */
html body .bnav, html body .bnav--dark { background: var(--play-bg); border-bottom: 1px solid var(--play-line); backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--f-body); }
/* no backdrop-filter on .bnav: it makes the nav the containing block for the fixed mobile menu and doubles the phone layout width */
html body .bnav-logo { font-family: var(--f-brand); font-weight: 700; color: var(--play-ink); letter-spacing: .16em; }
html body .bnav-menu a { color: var(--play-muted); font-weight: 600; }
html body .bnav-menu a:hover { color: var(--play-ink); }
html body .bnav-cta, html body .bnav-mcta {
  background: var(--play-fire); color: var(--play-on) !important; font-weight: 800; border: 2px solid rgba(0,0,0,.25);
  box-shadow: var(--play-shadow); border-radius: 12px;
}
html body .bnav-cta:hover, html body .bnav-mcta:hover { background: #f18566; transform: translateY(-1px); }
html body .bnav-burger span { background: var(--play-ink); }
@media (max-width: 980px) {
  html body .bnav-menu { background: var(--play-bg); border-top: 1px solid var(--play-line); }
  html body .bnav-menu a { color: var(--play-ink); border-bottom: 1px solid var(--play-line); }
  html body .bnav-cta { color: var(--play-on) !important; }
}

/* ── shared footer (child partials/brand-footer.php) */
html body .bfooter { background: #0d0f20; color: var(--play-muted); border-top: 1px solid var(--play-line); font-family: var(--f-body); }
html body .bfooter-logo { font-family: var(--f-brand); font-weight: 700; color: var(--play-ink); letter-spacing: .16em; }
html body .bfooter-links a, html body .bfooter-social a { color: var(--play-muted); }
html body .bfooter-links a:hover, html body .bfooter-social a:hover { color: var(--play-ink); }
html body .bfooter-legal a { color: var(--play-faint); }
html body .bfooter-reg { color: var(--play-faint); }
html body .bfooter-reg a { color: var(--play-muted) !important; }
html body .bfooter-strap { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; color: var(--play-ink); font-size: 18px; }

/* ── free-card promo strip (parent partials/promo-bar.php) */
html body .promo-bar, html body #promo-bar { background: var(--play-card-2); color: var(--play-ink); border-bottom: 1px solid var(--play-line); }

/* ── components every page can use */
html body .play-btn, html body .button.alt, html body .woocommerce .button.alt, html body button.button.alt, html body .wc-block-components-button {
  font: 800 15px/1 var(--f-body); background: var(--play-fire); color: var(--play-on) !important; border: 2px solid rgba(0,0,0,.25);
  border-radius: 12px; padding: 13px 18px; box-shadow: var(--play-shadow); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;  /* a link must be a box, or its padding spills over the text around it */
}
html body .play-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
html body .play-btn.ghost { background: var(--play-card); color: var(--play-ink) !important; border-color: var(--play-line); }
html body .play-panel { background: var(--play-card); border: 1px solid var(--play-line); border-radius: var(--play-r); box-shadow: var(--play-shadow); }
html body .play-mat { background-color: var(--play-mat); background-image: radial-gradient(var(--play-mat-dot) 1.6px, transparent 1.7px); background-size: 14px 14px; }
html body .play-eyebrow { font: 800 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--play-muted); }
html body .play-tint-water { background: color-mix(in srgb, var(--play-water) 16%, var(--play-card)); }
html body .play-tint-fire { background: color-mix(in srgb, var(--play-fire) 16%, var(--play-card)); }
html body .play-tint-grass { background: color-mix(in srgb, var(--play-grass) 16%, var(--play-card)); }
html body .play-tint-psychic { background: color-mix(in srgb, var(--play-psychic) 16%, var(--play-card)); }

/* forms */
html body input[type="text"], html body input[type="email"], html body input[type="tel"], html body input[type="number"],
html body input[type="search"], html body input[type="password"], html body input[type="url"], html body input:not([type]), html body select, html body textarea {
  background: var(--play-card-2); color: var(--play-ink); border: 1.5px solid var(--play-line); border-radius: 10px;
}
html body input::placeholder, html body textarea::placeholder { color: var(--play-faint); opacity: 1; }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--play-water); outline: none; box-shadow: 0 0 0 3px rgba(111, 157, 224, .25); }
html body label { color: var(--play-ink); }
html body select option { background: var(--play-card-2); color: var(--play-ink); }

/* tables */
html body table { border-color: var(--play-line); }
html body th { color: var(--play-muted); }
html body td, html body th { border-color: var(--play-line) !important; }

/* exit popup + cookie banner buttons */
html body #cookie-banner { background: #0d0f20 !important; border-bottom: 1px solid var(--play-line) !important; }

@media (prefers-reduced-motion: reduce) {
  html body * { scroll-behavior: auto !important; }
}

/* The old dark stylesheet (/calibre-dark.css, still loaded by News, articles, Registry, Index) uses !important
   on the footer; this wins back the Play footer there. Its forced input colours are overridden in those pages' own CSS files. */
html body .bfooter { background: #0d0f20 !important; color: var(--play-muted) !important; border-top: 1px solid var(--play-line) !important; }

/* Phones: the "Grade a card" button is always in the top bar, so the same link at the bottom of the open menu is a duplicate (2026-10-07) */
@media (max-width: 980px) { html body .bnav-menu .bnav-cta { display: none; } }