/* ============================================================================
   thematchadealer — BRAND BIBLE (the only design system)
   Import this on every page. Never hardcode a color or a font. Never add a 5th
   color. Never add a 2nd typeface. If a value isn't a token below, it's wrong.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;700;900&display=swap');

:root{
  /* THE FOUR COLORS — never more, never others */
  --ink:    #000000;   /* backgrounds, type, structure */
  --paper:  #FFFFFF;   /* canvas, breathing room */
  --matcha: #2D8B3E;   /* product / lot / signal — the "this matters" color */
  --dealer: #ED84A8;   /* accents, collabs, the ™ tag */

  /* structure */
  --rule: 3px;                 /* the one border weight. hard. */
  --gap: 14px;
  --pad: 16px;
  --font: 'League Spartan', sans-serif;   /* the ONLY typeface */
}

/* hard reset — brutalist means NO rounding, anywhere, ever */
*{ margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }

html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ---- TYPE ---- weight does the work, not a second font ---- */
.bb-display{ font-weight:900; letter-spacing:-.02em; line-height:.95; text-transform:uppercase; }
.bb-h1{ font-weight:900; font-size:clamp(40px,9vw,84px); letter-spacing:-.03em; line-height:.9; text-transform:uppercase; }
.bb-label{ font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.bb-spec-k{ font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.bb-spec-v{ font-weight:300; text-transform:uppercase; text-align:right; }
.bb-wm{ font-weight:700; letter-spacing:-.02em; text-transform:lowercase; }  /* the wordmark is always lowercase: thematchadealer. */
.bb-signal{ color:var(--matcha); font-weight:900; }   /* prices, lots, "in stock" — the signal moments */

/* ---- BAR / HEADER ---- ink block, paper type ---- */
.bb-bar{ background:var(--ink); color:var(--paper); display:flex; align-items:center; gap:10px; padding:12px 16px; }

/* ---- BUTTON ---- hard border, flat, no shadow. press = nudge, not glow ---- */
.bb-btn{
  font-family:var(--font); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 13px; border:var(--rule) solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer;
}
.bb-btn:active{ transform:translate(2px,2px); }
.bb-btn--matcha{ background:var(--matcha); color:var(--paper); }
.bb-btn--ink{ background:var(--ink); color:var(--paper); }

/* ---- CARD ("tin") ---- the core unit. hard frame, alternating ink/paper ---- */
.bb-card{ border:var(--rule) solid var(--ink); display:flex; flex-direction:column; background:var(--paper); color:var(--ink); position:relative; transition:transform .1s; }
.bb-card:active{ transform:translate(2px,2px); }
.bb-card--ink{ background:var(--ink); color:var(--paper); }

/* ---- the DEALER accent ---- a small pink square / tag. used sparingly ---- */
.bb-tag{ display:inline-block; width:12px; height:12px; background:var(--dealer); }

/* ---- GRID ---- */
.bb-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* ---- THE ONE SOFT THING ----
   Brutalism is the system. Exactly ONE whimsy charm element per layout,
   sized 10–25% of the viewport, placed OFF the grid (negative margin / odd
   offset). Don't center it, don't add a second one. */
.bb-whimsy{ position:absolute; width:18%; min-width:90px; pointer-events:none; }

/* ============================================================================
   BANNED — these are the "generic AI" tells. None of them belong here:
   - border-radius (rounded corners)         -> everything is hard 0
   - box-shadow / drop-shadow / glow          -> flat only
   - linear-gradient / radial-gradient on UI  -> solid fills only (3D charm excepted)
   - any color outside the four tokens        -> no grays, no blues, no purple
   - any font other than League Spartan       -> no Inter, no system-ui, no serif
   - glassmorphism / blur / translucency       -> opaque
   - emoji as UI                               -> use the dealer square instead
   ============================================================================ */