/* Wagick brand look (dark): near-black pages with champagne gold, forest-green and plum panels,
   Cinzel for headings and labels, Lora for body text and italics. Gold pill buttons, gold line icons,
   pill badges (sage NEW, gold BESTSELLER, plum LIMITED, outline ON SALE), moon and star ornaments.
   Loads last, so it only overrides what the brand board changes. */

/* ---------- Tokens ---------- */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
  --forest:#2E3829; --sage:#7A835E; --sand:#E6D8BF; --cream:#F6EFE2; --plum:#5D3A4C;
  --bg:#13110F; --surface:#1B1815; --sunk:#221E1A; --ink:#F1E8D6; --muted:#ACA18A;
  --line:#3A3229; --gold:#D4B77E; --gold-soft:#8E7850; --gold-ink:#1B1712; --gold-hi:#EAD6A6;
  --gold-grad:linear-gradient(180deg,#F0DCA8 0%,#D6B97F 52%,#B8975E 100%);
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --script:"Lora",Georgia,serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
}
body{font-family:var(--body);background:var(--bg) url("star-pattern.svg") 0 0/220px 220px}
::selection{background:var(--gold);color:var(--gold-ink)}

/* Browser surfaces carry the palette too: caret, checkboxes, scrollbars, focus, link underlines, price numerals */
html{scrollbar-color:#4A4033 var(--bg);accent-color:var(--gold);caret-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
a,.linkbtn{text-underline-offset:3px;text-decoration-thickness:1px}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold)}
.ft-price,.price,.lp-price,.mk-price,.pr-price,td,.stat b,.lp-bb-price{font-variant-numeric:lining-nums tabular-nums}
::placeholder{color:#8F8571;opacity:1}

/* Every rule that named Jost or Cormorant Garamond now gets Lora (Latin set, normal and italic). */
@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:italic;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2) format("woff2")}

/* ---------- Header: thin gold rule instead of the heavy rod ---------- */
header,.sheet,.scroll{--rod:linear-gradient(90deg,transparent,var(--gold-soft) 15%,var(--gold) 50%,var(--gold-soft) 85%,transparent)}
header{background:#18150F linear-gradient(180deg,#1E1A15,#161310);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sheet,.scroll{background-image:radial-gradient(140% 90% at 50% 0%,rgba(212,183,126,.07),transparent 60%);background-color:#1C1915}
header::after{height:1px;bottom:0;border-radius:0;box-shadow:none}
.logo{color:var(--gold-hi);font-weight:600;letter-spacing:.16em}
.logo img.mark{display:block;height:44px;width:auto;margin:-6px 0;flex:none}
@media (min-width:641px){.bar .demo-tag{left:104px}}
.nav button[aria-pressed="true"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.badge{background:#56623C;color:var(--cream);box-shadow:inset 0 0 0 1px #8E9A64}
.authbtn{border-radius:999px;padding:6px 16px;border-color:var(--gold)}

/* Scroll frames keep their shape, with fine gold rules in place of the rods */
.scroll::before,.scroll::after,.sheet::before,.sheet::after{height:1px;left:28px;right:28px;box-shadow:none;border-radius:0}
.scroll::before,.sheet::before{top:-1px}.scroll::after,.sheet::after{bottom:-1px}
.scroll,.sheet{border-radius:14px}

/* ---------- Buttons: gold pill primary, gold outline secondary ---------- */
.btn,.cta{background:var(--gold-grad);color:var(--gold-ink);border:0;border-radius:999px;font-family:var(--display);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:13px;padding:12px 24px;box-shadow:inset 0 1px 0 rgba(255,250,230,.45),0 6px 18px rgba(0,0,0,.35)}
.btn.small{font-size:12px;padding:8px 16px}
.btn.ghost{background:transparent;color:var(--gold-hi);border:1px solid var(--gold);box-shadow:none}
.btn:hover,.cta:hover{box-shadow:inset 0 1px 0 rgba(255,250,230,.45),0 10px 24px rgba(0,0,0,.45);filter:brightness(1.05)}
.btn.ghost:hover{background:rgba(212,183,126,.1)}
.lp-book{background:var(--gold-grad);font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.lp-outline,.wp-msg,.wp-fav{border-color:var(--gold);color:var(--gold-hi)}
.linkbtn{color:var(--gold-hi);text-decoration-color:var(--gold-soft)}
.toast{background:var(--gold-grad);border-radius:999px}

/* ---------- Badges and labels: four finishes from the brand guide ----------
   sage (NEW), bronze (BESTSELLER), plum (LIMITED), outline (ON SALE). Each is a dark tinted pill with a thin
   gold edge and light lettering; .wg-badge-* lets any new badge pick one. */
.pill,.tag,.mk-tag,.mk-match,.pr-flag,.gr-rank,[class*="wg-badge-"]{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border-radius:999px;padding:3px 11px;border:1px solid;box-shadow:inset 0 1px 0 rgba(255,245,220,.08),0 2px 6px rgba(0,0,0,.3)}
.wg-badge-sage,.pill.new,.pill.good,.mk-t-reading,.gr-rank.gr-new,.gr-rank.gr-rising{
  background:linear-gradient(180deg,#4F5B3F,#3B4530);border-color:rgba(200,184,130,.75);color:#EDEEDC}
.wg-badge-bronze,.mk-match,.pill.warn,.mk-t-goods,.gr-rank.gr-elder{
  background:linear-gradient(180deg,#4A3923,#33271A);border-color:#B8975E;color:#F0DDB0}
.wg-badge-plum,.mk-t-spell,.pr-flag.out{
  background:linear-gradient(180deg,#56344A,#3E2535);border-color:rgba(201,160,140,.7);color:#F3DFE8}
.wg-badge-outline,.pill,.tag,.mk-t-live,.mk-t-session,.mk-match.soft,.gr-rank.gr-trusted,.pr-flag{
  background:rgba(14,12,10,.82);border-color:#E6D8BF;color:#F4EBD8}
.pill.new,.pill.good{background:linear-gradient(180deg,#4F5B3F,#3B4530);border-color:rgba(200,184,130,.75);color:#EDEEDC}
.pill.warn{background:linear-gradient(180deg,#4A3923,#33271A);border-color:#B8975E;color:#F0DDB0}
.mk-match.soft{background:rgba(14,12,10,.82);border-color:#E6D8BF;color:#F4EBD8}
.pr-flag.out{background:linear-gradient(180deg,#56344A,#3E2535);border-color:rgba(201,160,140,.7);color:#F3DFE8}
.gr-rank svg{color:currentColor}
.intent,.chipb{border-radius:999px}
.intent[aria-pressed="true"],.chipb[aria-pressed="true"]{background:var(--gold-grad);color:var(--gold-ink);border-color:#F0DCA8}

/* Fields: dark wells with a gold focus ring */
.field:focus,.lp-field input:focus,.lp-field textarea:focus,.tools input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,183,126,.16);outline:none}

/* ---------- Hero: a forest-green panel with gold type, like the board's top banner ---------- */
/* The hero keeps its original dark brown night (Nick, 10 Nov); only the type follows the brand. */
.vh{--vh-line:rgba(212,183,126,.32)}
.vh-title{font-family:var(--display);font-style:normal;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(28px,min(3.4vw,5vh),50px);line-height:1.1;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-hi);filter:none;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.vh-kicker{color:#EDE3CC}
.vh-name{font-family:var(--display);font-weight:600;font-size:calc(var(--cw)*.1);letter-spacing:.04em}
.vh-sub{font-family:var(--body)}
.vh-browse{font-family:var(--display);background:rgba(15,14,12,.55);box-shadow:none}
.vh-browse:hover,.vh-browse:focus-visible{background:var(--gold-grad);color:var(--gold-ink);box-shadow:0 10px 24px rgba(0,0,0,.4)}

/* Tarot cards everywhere: forest-green backs with gold line art, like the board's tarot card */
.vh-face,.wr-face,.ax-face{background:radial-gradient(120% 70% at 50% 30%,#34402D,#1C2419 72%)}

/* Hero cards keep their original dark brown faces and backs (Nick, 10 Nov). */
.vh .vh-face{background:radial-gradient(120% 70% at 50% 30%,#2A2219,#16130F 70%)}

/* ---------- Featured tools ---------- */
.ft-title{font-family:var(--display);font-style:normal;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(18px,1.7vw,24px)}
.ft-all{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.ft-name{font-family:var(--body);font-weight:500;font-size:15px}
.ft-price{font-family:var(--body);font-weight:600;font-size:16px}
.ft-cart:hover,.ft-cart:focus-visible{background:var(--gold-grad)}

/* ---------- Cart scroll: a forest-green night instead of blue ---------- */
.sheet.sky{--night:#141B12}

@media (max-width:640px){
  .vh-title{font-size:clamp(24px,7.4vw,34px);letter-spacing:.1em}
  .btn,.cta{font-size:12px}
}

/* Live status tags on witch cards: sage for taking calls, plum for streaming, with a small live dot */
.wf-nowtag{font-family:var(--display);font-size:11px;letter-spacing:.14em;border:1px solid rgba(200,184,130,.75);
  background:linear-gradient(180deg,#4F5B3F,#3B4530);color:#EDEEDC;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.wf-nowtag::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:#9FD6A8;vertical-align:middle}
.is-stream .wf-nowtag{background:linear-gradient(180deg,#56344A,#3E2535);border-color:rgba(201,160,140,.7);color:#F3DFE8}
.is-stream .wf-nowtag::before{background:#F07A66}

/* ---------- Coming-soon gate: the full moth art, gold pill buttons ---------- */
#gate{--g-bg:#13110F;--g-gold:#D4B77E;--g-gold-hi:#EAD6A6}
#gate .gt-mark{width:auto;height:150px;object-fit:contain}
#gate .gt-mark-sm{width:auto;height:30px}
#gate .gt-btn{border-radius:999px;background:var(--gold-grad);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
#gate .gt-btn.gt-ghost{background:transparent;border:1px solid var(--gold);color:var(--gold-hi)}
#gate .gt-in{border-radius:999px;padding-left:18px}
@media (max-width:640px){#gate .gt-mark:not(.gt-mark-sm){width:auto;height:110px}}

/* Fields inside the green cart scroll sit in green wells */
.sky .field,.sky input,.sky select,.sky textarea{background:#10160E;border-color:rgba(212,183,126,.35)}