/* ============================================================================
   BRAND SKIN — 580drop "Prairie Dusk" shapes. Loaded after app.css.
   Gradient CTAs + glow, gradient price, amber pops, Overpass headings.
   ========================================================================== */

/* ---- ambient sunset glow ------------------------------------------------ */
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(55% 36% at 12% 0%, rgba(255,122,24,.16), transparent 60%),
    radial-gradient(48% 36% at 96% 6%, rgba(255,170,60,.12), transparent 60%);
  background-attachment: fixed;
}
/* GOLDEN HOUR: a warm sunset sky settling onto the warm-sand prairie. Soft and
   low-saturation so products + the orange CTA carry the eye. Fixed backdrop. */
:root[data-theme="light"] body, :root:not([data-theme="dark"]) body{
  background-color: var(--brand-paper);
  background-image:
    radial-gradient(30% 18% at 78% 5%, rgba(255,232,182,.8), rgba(255,214,120,0) 62%),
    linear-gradient(180deg, #F3CDA1 0%, #F6DBB8 18%, #F8E8CF 38%, #F7EEDF 58%, var(--brand-paper) 80%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* header rests in the warm light */
:root[data-theme="light"] .site-head{ background:rgba(247,235,212,.66); }
:root[data-theme="light"] .notice-strip{ box-shadow:0 1px 0 rgba(0,0,0,.04); }

/* bigger, prouder logo */
.brand-logo{ width:44px; height:44px; border-radius:12px; box-shadow:var(--brand-glow-soft); }
.site-head .wrap{ position:relative; }

/* ---- referral welcome banner (influencer / local social group) ---------- */
.ref-banner{
  display:flex; align-items:center; gap:10px;
  max-width:980px; margin:10px auto 0; padding:11px 14px;
  background:var(--brand-accent-soft);
  border:1px solid color-mix(in srgb, var(--brand-accent) 32%, transparent);
  border-left:4px solid var(--brand-accent);
  border-radius:var(--brand-radius-sm);
  color:var(--brand-ink); font-weight:600; font-size:.95rem;
}
.ref-banner__tag{
  flex:none; font:800 .66rem/1 var(--brand-font-mono,monospace);
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--brand-accent); color:#fff;
  padding:4px 8px; border-radius:999px;
}
.ref-banner__msg{ flex:1 1 auto; }
.ref-banner__x{
  flex:none; border:0; background:transparent; cursor:pointer;
  font-size:1.25rem; line-height:1; color:var(--brand-muted); padding:0 2px;
}
.ref-banner__x:hover{ color:var(--brand-ink); }
@media (max-width:560px){ .ref-banner{ margin:8px 12px 0; font-size:.88rem; } }

/* ---- slim notice strip -------------------------------------------------- */
.notice-strip{
  background:var(--brand-bar-bg); color:var(--brand-bar-fg);
  font-family:var(--brand-font-mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; text-align:center; padding:8px 12px;
}
.notice-strip b{ color:#fff; font-weight:800; }

/* ---- header ------------------------------------------------------------- */
.site-head{ border-bottom:1px solid var(--brand-line); }
.brand-name{ font-family:var(--brand-font-wordmark); font-weight:800; letter-spacing:-.025em; font-size:1.34rem; }
.brand-name b{ color:var(--brand-accent); font-weight:800; }
.brand-logo{ border-radius:10px; box-shadow:var(--brand-glow-soft); }
.head-actions{ display:flex; align-items:center; gap:10px; }

/* ---- type: Fraunces display (warm, mixed-case), Space Mono for data ------ */
.display,.card-title,.biz-name,.detail-hero h1,.section-head h2,.product h3,
.spotlight-title,.maker-name,h1,h2,h3{
  font-family:var(--brand-font-display); letter-spacing:-.005em; font-weight:900;
  font-optical-sizing:auto;
}
.display,.spotlight-title{ text-transform:none; }   /* Fraunces shines in mixed case */
.eyebrow{ font-family:var(--brand-font-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--brand-accent); font-weight:700; font-size:.66rem; }
:root[data-theme="dark"] .eyebrow{ color:var(--brand-lime); }

/* ---- buttons: gradient money→lime + glow -------------------------------- */
.btn{ border-radius:var(--brand-radius-sm); font-family:var(--brand-font-display); font-weight:700; letter-spacing:-.01em; }
.btn-heat, .btn-ink{ background:var(--brand-grad); color:var(--brand-accent-ink); border:none; box-shadow:var(--brand-glow); }
.btn-heat:hover, .btn-ink:hover{ background:var(--brand-grad-press); color:var(--brand-accent-ink); }
.btn-ghost{ background:transparent; color:var(--brand-ink); border:1px solid var(--brand-border); }
.btn-ghost:hover{ background:var(--brand-soft); border-color:var(--brand-accent); }

/* ---- cards -------------------------------------------------------------- */
.card,.panel,.detail-hero,.how .step-card{
  border:1px solid var(--brand-line); border-radius:var(--brand-radius);
  box-shadow:var(--brand-shadow); background:var(--brand-card);
}

/* ---- chips -------------------------------------------------------------- */
.chip{ font-family:var(--brand-font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.6rem; border-radius:999px; font-weight:700; }
.chip-live{ background:var(--brand-lime); color:#2A1C10; border:none; box-shadow:var(--brand-glow-soft); }
.chip-live .dot{ background:#2A1C10; }
.chip-soon{ background:var(--brand-stamp); color:#fff; border:none; }
.chip-spiff{ background:var(--brand-lime); color:#2A1C10; border:none; box-shadow:var(--brand-glow-soft); }  /* bonus = sunny gold */
.chip-save{ background:var(--brand-positive); color:#fff; border:none; }                                     /* savings = grass green */

/* ---- prices, codes → mono; hero price = gradient ------------------------ */
.price,.pprice,.fromprice,.now,.mono,.countdown,.cd-cell,.count-pill,.reflink,.kv,.totrow{
  font-family:var(--brand-font-mono); font-variant-numeric:tabular-nums;
}
.price,.now,.pprice{ font-weight:700; letter-spacing:-.02em; }
.price,.detail-hero .now,.pprice{
  color:var(--brand-lime);
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---- crowd = prairie-sky blue (the whole town piling in) ----------------- */
.count-pill{
  background:var(--brand-sky-soft); color:var(--brand-sky-ink);
  border:1px solid color-mix(in srgb, var(--brand-sky) 32%, transparent);
  border-radius:999px; padding:5px 11px; font-weight:700;
}
.count-pill b{ color:var(--brand-sky-ink); }

/* ---- value banner ------------------------------------------------------- */
.spiff-banner{ background:var(--brand-accent-soft); border:1px solid color-mix(in srgb, var(--brand-lime) 40%, transparent); color:var(--brand-lime); border-radius:var(--brand-radius-sm); box-shadow:var(--brand-glow-soft); }
:root[data-theme="light"] .spiff-banner{ color:var(--brand-accent); }

/* ---- crowd meter (green = savings filling up) --------------------------- */
.meter .fill,.crowd .fill,.fill{ background:linear-gradient(90deg, var(--brand-positive), #5FD080); box-shadow:0 0 14px rgba(46,168,77,.4); }
.crowd .note b{ color:var(--brand-positive); }

/* ---- save/off badge ----------------------------------------------------- */
.off,.save-badge,.pct-off{ background:var(--brand-lime); color:#2A1C10; font-family:var(--brand-font-display); font-weight:700; box-shadow:var(--brand-glow-soft); }

/* ---- dividers + footer -------------------------------------------------- */
.divider,.ladder-foot{ border-color:var(--brand-line); }
.site-foot{ border-top:1px solid var(--brand-line); }

/* ---- retailer logo lockup ---------------------------------------------- */
.retailer-logo{ display:inline-flex; align-items:center; gap:10px; }
.retailer-logo img{ height:30px; width:auto; }
:root[data-theme="dark"] .retailer-logo img.is-ink{ filter:invert(1) brightness(1.7); }

/* ---- ELEGANT LIGHT/DARK TOGGLE ------------------------------------------ */
.theme-toggle{
  width:38px; height:38px; flex:none; padding:0; cursor:pointer; display:inline-grid; place-items:center;
  background:transparent; color:var(--brand-ink);
  border:1px solid var(--brand-border); border-radius:var(--brand-radius-sm);
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.theme-toggle:hover{ background:var(--brand-soft); box-shadow:var(--brand-glow-soft); }
.theme-toggle:active{ transform:translateY(1px); }
.theme-toggle:focus-visible{ outline:2px solid var(--brand-lime); outline-offset:2px; }
.theme-toggle svg{ width:18px; height:18px; display:block; }
.theme-toggle .i-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:none; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width:560px){
  .notice-strip{ font-size:.56rem; letter-spacing:.12em; padding:7px 10px; }
  .head-actions{ gap:8px; }
}