/* ============================================================
   THEME · single source of truth for the mocks gallery skin
   ------------------------------------------------------------
   This file holds the *current* design language for all gallery
   mocks (index.html and feature-*.html). It is intentionally
   structured so a rebrand = edit this file, restart the mocks
   server, every consumer flips.

   Currently set to: PAAN POP · v2 (live as of 2026-05-25)
     - cream newsprint page bg (brightened from v1's #fff5d0)
     - cream paper cards (same colour — paan-pop is "all paper")
     - hot-pink stamps — slightly brighter than v1 for more presence
     - bulb-yellow emphasis (replaces v1's acidic lime)
     - mint for ambient pops (replaces v1's betel-green)
     - hard ink-offset shadows ("2px 2px 0 ink") — vocabulary unchanged
     - rounded display type
     - optional dark cinema-night stage (--theme-stage*) kept around
       as a MOOD token for views that opt in; not the default bg

   To rebrand:
     1. Change the values in :root below to the new theme's tokens.
     2. If the new theme needs different signature primitives
        (e.g. soft glows instead of hard shadows), adjust the
        helper classes (.theme-stamp, .theme-tag, .theme-tape, …).
     3. Restart the mocks server. No per-mock edits needed.

   What lives WHERE:
     - Tokens (colors / type / radii / shadows) → :root in this file
     - Reusable chrome primitives (backdrop, masthead, device frame,
       stamps, tags, tape, tack, rosette) → .theme-* classes below
     - Per-game gameplay UI (syllable cards, vote bars, score sheets)
       → stays in the individual feature-*.html files but consumes
       only the var(--theme-*) tokens defined here
   ============================================================ */

:root {
  /* ---------- Palette: page + card surfaces (cream paan-paper) ---------- */
  --theme-bg:           #fffaee;   /* page bg — brightened cream (v1 was #fff5d0) */
  --theme-bg-deep:      #f8e9d4;   /* toasted cream — chips, packets */
  --theme-surface:      #fffaee;   /* cards / tiles — same paper as page */
  --theme-surface-soft: #f8e9d4;
  --theme-cork:         #d8b67a;   /* warm tan corkboard accent */
  --theme-cork-dark:    #a47a3b;

  /* ---------- Palette: ink (text on cream) ---------- */
  --theme-ink:          #1a1410;
  --theme-ink-soft:     rgba(26, 20, 16, 0.72);
  --theme-ink-mute:     rgba(26, 20, 16, 0.50);
  --theme-ink-whisper:  rgba(26, 20, 16, 0.28);
  --theme-hair:         rgba(26, 20, 16, 0.12);

  /* ---------- Optional: dark cinema-night MOOD tokens ----------
     Kept available for any mock that wants to render in the
     "Showtime" theater-context wrapper. NOT the default page bg. */
  --theme-stage:          #0a1626;
  --theme-stage-soft:     #122438;
  --theme-on-stage:       #fffaee;
  --theme-on-stage-soft:  rgba(255, 250, 238, 0.78);
  --theme-on-stage-mute:  rgba(255, 250, 238, 0.55);
  --theme-on-stage-line:  rgba(255, 250, 238, 0.18);

  /* ---------- Palette: accents ---------- */
  --theme-accent:       #ff2e9a;   /* hot pink — brighter than v1 #ff1e88 */
  --theme-accent-hi:    #ff66b8;
  --theme-accent-deep:  #d6116e;   /* magenta — hard-shadow + text-safe variant */
  --theme-accent-soft:  rgba(255, 46, 154, 0.14);
  --theme-accent-edge:  rgba(255, 46, 154, 0.42);
  --theme-accent-glow:  rgba(255, 46, 154, 0.55);

  --theme-pop:          #ffd23a;   /* BULB YELLOW — emphasis (v2: was acidic lime #f8e620) */
  --theme-pop-deep:     #8a6c00;
  --theme-green:        #5fd9a8;   /* MINT — ambient go (v2: was betel #1ea456) */
  --theme-green-deep:   #1ea456;   /* betel — text-safe / success variant */
  --theme-saffron:      #ff8e1a;
  --theme-warn:         #e63946;

  /* ---------- Backwards-compat aliases for legacy _mocks.css ----------
     The shared _mocks.css references --bg, --ink, --accent, --saffron,
     --turquoise, --gold, etc. Map them to the theme tokens so the
     shared chrome inherits the theme automatically. */
  --bg:           var(--theme-bg);
  --bg-soft:      var(--theme-surface);
  --surface-1:    var(--theme-surface);
  --surface-2:    var(--theme-bg-deep);
  --ink:          var(--theme-ink);
  --ink-soft:     var(--theme-ink-soft);
  --ink-mute:     var(--theme-ink-mute);
  --ink-whisper:  var(--theme-ink-whisper);
  --hairline:     var(--theme-hair);
  --accent:       var(--theme-accent);
  --accent-hi:    var(--theme-accent-hi);
  --accent-soft:  var(--theme-accent-soft);
  --accent-edge:  var(--theme-accent-edge);
  --accent-glow:  var(--theme-accent-glow);
  --saffron:      var(--theme-saffron);
  --turquoise:    var(--theme-green);
  --gold:         var(--theme-pop);

  /* ---------- Typography ---------- */
  --theme-font-display: "Avenir Next Rounded", "Quicksand", "Nunito", system-ui, sans-serif;
  --theme-font-body:    "Avenir Next Rounded", "Quicksand", "Nunito", system-ui, sans-serif;
  --theme-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --theme-font-script:  "Georgia", "Times New Roman", serif;   /* Hindi/Devanagari fallback */

  /* ---------- Radii: Paan Pop is square-leaning ---------- */
  --theme-r-pill:  999px;
  --theme-r-card:  4px;
  --theme-r-tag:   2px;
  --theme-r-stamp: 6px;

  /* ---------- Shadows: hard ink-offset is the Paan Pop signature ---------- */
  --theme-shadow-stamp:  2px 2px 0 var(--theme-ink);
  --theme-shadow-stamp-pink: 3px 3px 0 var(--theme-accent);
  --theme-shadow-stamp-magenta: 3px 3px 0 var(--theme-accent-deep);
  --theme-shadow-tag:    2px 3px 0 rgba(26, 20, 16, 0.10),
                         4px 6px 12px rgba(26, 20, 16, 0.18);
  --theme-shadow-tile:   3px 3px 0 var(--theme-accent);
  --theme-shadow-tile-hover: 5px 5px 0 var(--theme-accent-deep);
  --theme-shadow-button: 0 0 0 2px var(--theme-accent-deep),
                         3px 4px 0 var(--theme-ink),
                         6px 7px 10px rgba(26, 20, 16, 0.20);

  /* ---------- Borders ---------- */
  --theme-bd-ink:    1.5px solid var(--theme-ink);
  --theme-bd-hair:   1px solid var(--theme-hair);
  --theme-bd-dashed: 1.5px dashed var(--theme-ink);
}

/* ============================================================
   THEME PRIMITIVES — reusable Paan Pop chrome
   Use these classes in any mock to get on-brand surface
   treatments without redefining colors.
   ============================================================ */

/* Body should always sit on theme bg with theme body font. */
body.theme-body {
  background: var(--theme-bg);
  color: var(--theme-ink);
  font-family: var(--theme-font-body);
}

/* ---------- Backdrop: corkboard receipt-grid ---------- */
.theme-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 30, 136, 0.07), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(30, 164, 86, 0.06), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    repeating-linear-gradient(-45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    var(--theme-bg);
}
.theme-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(26, 20, 16, 0.07) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
}

/* Re-use as overlay inside an existing .mock-bg from _mocks.css. */
.mock-bg.theme-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 30, 136, 0.07), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(30, 164, 86, 0.06), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    repeating-linear-gradient(-45deg,
      rgba(164, 122, 59, 0.045) 0 2px,
      transparent 2px 6px),
    var(--theme-bg);
}
.mock-bg.theme-bg .blob { display: none; }
.mock-grain.theme-grain {
  background-image: radial-gradient(circle, rgba(26, 20, 16, 0.07) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  opacity: 0.50;
}

/* ---------- Masthead (used in mock-shell pages) ---------- */
.theme-masthead-title {
  font-family: var(--theme-font-display);
  letter-spacing: -0.03em;
}
.theme-masthead-title em {
  color: var(--theme-accent);
  background: var(--theme-pop);
  padding: 0 8px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: var(--theme-shadow-stamp-magenta);
  font-style: italic;
}
.theme-kicker {
  background: var(--theme-accent);
  color: var(--theme-bg);
  border: 1px solid var(--theme-accent-deep);
  box-shadow: 2px 2px 0 var(--theme-accent-deep);
  letter-spacing: 0.18em;
  padding: 3px 10px;
  font-family: var(--theme-font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
}

/* ---------- Device frame: cream screen, hot-pink bezel ---------- */
.theme-device {
  background: var(--theme-ink);
  box-shadow:
    0 0 0 9px var(--theme-ink),
    0 0 0 10px var(--theme-accent),
    0 0 0 13px var(--theme-ink),
    0 28px 64px -10px rgba(0, 0, 0, 0.55),
    0 0 80px -20px var(--theme-accent-glow);
}
.theme-device .device-screen {
  background: var(--theme-bg);
  color: var(--theme-ink);
}
.theme-device .device-statusbar {
  color: var(--theme-ink);
  font-family: var(--theme-font-display);
  font-weight: 700;
}
.theme-device .device-notch {
  background: var(--theme-ink);
}
.theme-device .device-home-indicator {
  background: rgba(26, 20, 16, 0.55);
}

/* ---------- Tag: cut-paper cream card ---------- */
.theme-tag {
  position: relative;
  background: var(--theme-bg);
  color: var(--theme-ink);
  padding: 14px 14px 12px;
  box-shadow: var(--theme-shadow-tag);
  border-radius: var(--theme-r-tag);
}
.theme-tag.perforated {
  border: var(--theme-bd-dashed);
  box-shadow: 4px 4px 0 var(--theme-ink);
  border-radius: var(--theme-r-card);
}

/* ---------- Stamp button: hot-pink CTA with hard shadow ---------- */
.theme-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--theme-accent);
  color: var(--theme-bg);
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--theme-r-stamp);
  box-shadow: var(--theme-shadow-button);
  cursor: pointer;
  transform: rotate(-1.5deg);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  text-decoration: none;
}
.theme-stamp:active {
  transform: rotate(-1.5deg) translate(2px, 2px);
  box-shadow: 0 0 0 2px var(--theme-accent-deep), 1px 1px 0 var(--theme-ink);
}
.theme-stamp.lime {
  background: var(--theme-pop);
  color: var(--theme-ink);
  box-shadow: 0 0 0 2px var(--theme-ink),
              3px 4px 0 var(--theme-accent-deep),
              6px 7px 10px rgba(26, 20, 16, 0.20);
  text-shadow: none;
}
.theme-stamp.green {
  background: var(--theme-green);
  color: var(--theme-bg);
  box-shadow: 0 0 0 2px var(--theme-green-deep),
              3px 4px 0 var(--theme-ink),
              6px 7px 10px rgba(26, 20, 16, 0.20);
}
.theme-stamp.ghost {
  background: var(--theme-bg);
  color: var(--theme-ink);
  border: var(--theme-bd-dashed);
  box-shadow: 3px 4px 0 var(--theme-accent);
  transform: rotate(1deg);
}

/* ---------- Striped washi tape divider (lime + pink) ---------- */
.theme-tape {
  height: 14px;
  background:
    repeating-linear-gradient(45deg,
      var(--theme-pop) 0 10px,
      var(--theme-accent) 10px 20px);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  position: relative;
  transform: rotate(-0.6deg);
}

/* ---------- Thumbtack — small SVG-shaped pin ---------- */
.theme-tack {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #ffd2e3 0%,
      var(--theme-accent) 50%,
      var(--theme-accent-deep) 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    2px 3px 4px rgba(0, 0, 0, 0.32),
    inset -1px -1px 1.5px rgba(0, 0, 0, 0.28),
    inset 1px 1px 1.5px rgba(255, 255, 255, 0.6);
}
.theme-tack.green  { background: radial-gradient(circle at 35% 30%, #b9efd0 0%, var(--theme-green) 55%, var(--theme-green-deep) 100%); }
.theme-tack.lime   { background: radial-gradient(circle at 35% 30%, #fff9b0 0%, var(--theme-pop) 55%, var(--theme-pop-deep) 100%); }
.theme-tack.orange { background: radial-gradient(circle at 35% 30%, #ffd2a8 0%, var(--theme-saffron) 55%, #a14d00 100%); }
.theme-tack.ink    { background: radial-gradient(circle at 35% 30%, #6a5a47 0%, var(--theme-ink) 70%); }

/* ---------- Rate chip: small lime/pink price tag ---------- */
.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--theme-pop);
  color: var(--theme-ink);
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border-radius: var(--theme-r-tag);
  border: 1px solid var(--theme-ink);
  box-shadow: 1px 1px 0 var(--theme-ink),
              2px 2px 0 var(--theme-accent-deep);
  transform: rotate(-1deg);
}
.theme-chip.pink {
  background: var(--theme-accent);
  color: var(--theme-bg);
  box-shadow: 1px 1px 0 var(--theme-ink),
              2px 2px 0 var(--theme-pop);
}
.theme-chip.green {
  background: var(--theme-green);
  color: var(--theme-bg);
  box-shadow: 1px 1px 0 var(--theme-ink),
              2px 2px 0 var(--theme-pop);
}

/* ---------- Mug avatar: round initial chip ---------- */
.theme-mug {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--theme-pop);
  color: var(--theme-ink);
  display: inline-grid;
  place-items: center;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 12px;
  border: 1.5px solid var(--theme-ink);
  box-shadow: 1px 1.5px 0 var(--theme-ink);
}
.theme-mug.pink   { background: var(--theme-accent);  color: var(--theme-bg); }
.theme-mug.green  { background: var(--theme-green);   color: var(--theme-bg); }
.theme-mug.orange { background: var(--theme-saffron); color: var(--theme-bg); }
.theme-mug.cream  { background: var(--theme-bg-deep); color: var(--theme-ink); }
.theme-mug.magenta { background: var(--theme-accent-deep); color: var(--theme-bg); }

/* ---------- Section label as washi-tape strip ---------- */
.theme-section-label {
  font-family: var(--theme-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-ink);
  margin: 0 0 14px;
  padding: 10px 14px 12px;
  background: var(--theme-bg-deep);
  border: var(--theme-bd-ink);
  box-shadow: 3px 3px 0 var(--theme-accent);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transform: rotate(-0.4deg);
}
.theme-section-label em {
  font-style: normal;
  font-family: var(--theme-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--theme-ink-soft);
  flex: 1;
  min-width: 200px;
}

/* ---------- Rosette ("today's special") ---------- */
.theme-rosette {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--theme-font-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--theme-bg);
  line-height: 1.04;
  transform: rotate(-12deg);
}
.theme-rosette svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(2px 3px 0 var(--theme-ink));
}
.theme-rosette span {
  position: relative;
  z-index: 2;
  padding: 0 6px;
}

/* ---------- Pin-up corkboard backdrop for inside a device screen ---------- */
.theme-board-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 30, 136, 0.06), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(30, 164, 86, 0.05), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(164, 122, 59, 0.05) 0 2px,
      transparent 2px 6px),
    repeating-linear-gradient(-45deg,
      rgba(164, 122, 59, 0.05) 0 2px,
      transparent 2px 6px),
    var(--theme-bg);
}
.theme-board-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(26, 20, 16, 0.07) 1px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* ---------- Reduced-motion killswitch ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-tape, .theme-stamp, .theme-tag, .theme-section-label,
  .mock-link, .theme-chip, .theme-rosette {
    transform: none !important;
    animation: none !important;
  }
}