/* ============================================================================
   Election Tamasha — ISOLATED THEME / SKIN LAYER
   ----------------------------------------------------------------------------
   Everything here is *look & feel only*. Colours, fonts, textures, poster
   motifs and party identities live in this one file (+ /client/assets/).
   The structural stylesheet (style.css) only consumes these CSS variables and
   never hardcodes a brand colour. To reskin when real card art arrives, edit
   THIS file (and drop art into /client/assets/) — no markup or logic changes.
   Brand echo: electiontamasha.co.in — off-white base, Purple vs Yellow parties,
   satirical Indian campaign-poster energy (ink stamps, halftone, slang).
   ============================================================================ */

/* Google Fonts — poster-condensed display + expressive grotesque + clean body.
   (No Inter/Roboto/Arial — deliberately characterful.) */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Spline+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- base / paper ---- */
  --et-paper:        rgb(246, 245, 248);
  --et-paper-2:      rgb(238, 236, 242);
  --et-ink:          #1b1622;         /* near-black warm ink */
  --et-ink-soft:     #4a4356;
  --et-ink-faint:    #8b8496;
  --et-hairline:     rgba(27, 22, 34, 0.12);
  --et-hairline-2:   rgba(27, 22, 34, 0.06);

  /* ---- Purple Party (Mrs. Jamuni) ---- */
  --p-ink:           #5b21a6;         /* deep jamun purple */
  --p-bright:        #7c3aed;
  --p-soft:          #ede4fb;
  --p-glow:          rgba(124, 58, 237, 0.28);
  --p-contrast:      #ffffff;

  /* ---- Yellow Party (Mr. Haldi) ---- */
  --y-ink:           #b45309;         /* turmeric/amber ink for legible "yellow" */
  --y-bright:        #f5a800;         /* haldi gold */
  --y-soft:          #fdf0cf;
  --y-glow:          rgba(245, 168, 0, 0.32);
  --y-contrast:      #2a1c00;

  /* ---- semantic ---- */
  --et-good:         #1f9d63;
  --et-warn:         #d4771a;
  --et-bad:          #c62d42;
  --et-stamp:        #c62d42;         /* red rubber-stamp ink */

  /* ---- surfaces / bezels ---- */
  --et-card:         #fffdfb;
  --et-card-2:       #faf7fb;
  --et-tray:         rgba(27, 22, 34, 0.045);
  --et-inner-hi:     inset 0 1px 1px rgba(255, 255, 255, 0.85);
  --et-lift:         0 18px 40px -22px rgba(27, 22, 34, 0.45),
                     0 3px 10px -6px rgba(27, 22, 34, 0.28);
  --et-lift-soft:    0 12px 30px -20px rgba(27, 22, 34, 0.4);

  /* ---- radii ---- */
  --et-r-lg:         26px;
  --et-r-md:         18px;
  --et-r-sm:         12px;

  /* ---- type ---- */
  --et-display:      'Anton', 'Bricolage Grotesque', system-ui, sans-serif;
  --et-head:         'Bricolage Grotesque', system-ui, sans-serif;
  --et-body:         'Spline Sans', system-ui, sans-serif;

  /* ---- motion ---- */
  --et-ease:         cubic-bezier(0.32, 0.72, 0, 1);
  --et-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- halftone / paper texture (data-URI, offline-safe) ---- */
  --et-halftone: radial-gradient(rgba(27,22,34,0.05) 1px, transparent 1.4px);
}

/* Party accent driver — set data-party on any element to inherit its palette. */
[data-party="P"] {
  --party-ink: var(--p-ink);    --party-bright: var(--p-bright);
  --party-soft: var(--p-soft);  --party-glow: var(--p-glow);
  --party-contrast: var(--p-contrast);
}
[data-party="Y"] {
  --party-ink: var(--y-ink);    --party-bright: var(--y-bright);
  --party-soft: var(--y-soft);  --party-glow: var(--y-glow);
  --party-contrast: var(--y-contrast);
}

/* ---- ink-stamp seal motif (used for phase + winner flourishes) ---- */
.et-stamp {
  font-family: var(--et-display);
  letter-spacing: 0.06em;
  color: var(--et-stamp);
  border: 3px solid var(--et-stamp);
  border-radius: 8px;
  padding: 0.2em 0.55em;
  transform: rotate(-4deg);
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(198,45,66,0.15);
  opacity: 0.92;
  mix-blend-mode: multiply;
}

/* ---- poster tape corner (decorative) ---- */
.et-tape::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 74px; height: 22px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(180deg, rgba(245,168,0,0.55), rgba(245,168,0,0.32));
  box-shadow: 0 1px 4px rgba(27,22,34,0.18);
  border-left: 1px dashed rgba(27,22,34,0.15);
  border-right: 1px dashed rgba(27,22,34,0.15);
  pointer-events: none;
}