/* ClaimFlow shared theme — design tokens + brand atoms for BOTH pages.
   Edit here once; index.html and admin.html both pick the change up.
   Page-specific layout/density stays inside each page's own <style>. */

:root{
  /* DARK theme — surfaces & text */
  --bg:#080B16; --ink:#EAEEF9; --muted:#97A2C2; --card:#141A2D; --border:#28324F;
  /* elevated surface + subtle hairline for layering on dark */
  --card2:#1B2238; --hair:rgba(255,255,255,.07);
  /* brand: navy ocean + gold (One Piece), electric yellow / blue / red (Pokémon) */
  --navy:#0E1530; --gold:#D4AF37; --goldsoft:#E8D27A;
  --pkyellow:#FFCB05; --pkblue:#4F9BE8; --pkred:#FF4D63;
  /* legacy aliases used by admin.html rules */
  --pink:var(--pkred); --violet:var(--pkblue);
  /* status colors (brightened for dark surfaces) */
  --mint:#34D399; --amber:#FBBF24; --danger:#FF5A72;
  /* holo foil */
  --holo:linear-gradient(110deg, #7DE2FC, #B9A0FF, #FF9ECE, #FFE29A);
  /* shape */
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.42);
}

/* brand wordmark: holo-foil text (size/spacing set per page) */
.wordmark{
  font-weight:800;
  background:var(--holo);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* CSS-drawn pokeball mark (no trademarked artwork) */
.pokeball{
  flex:none; width:26px; height:26px; border-radius:50%; position:relative;
  background:linear-gradient(180deg, var(--pkred) 0 44%, var(--navy) 44% 56%, #FFFFFF 56% 100%);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 2px rgba(255,203,5,.35), 0 2px 8px rgba(0,0,0,.35);
}
.pokeball::after{
  content:''; position:absolute; inset:0; margin:auto; width:8px; height:8px;
  background:#FFFFFF; border:2px solid var(--navy); border-radius:50%;
}

/* dual-franchise tagline (sits on the navy band) */
.tagline{
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pkyellow); margin-top:2px;
}
.tagline .sep{ color:#9AA6C4; padding:0 5px; }