/* ============================================================================
   Magnum RFP Response — palette tokens, lifted from magnumicecream.com/uk
   (dark chocolate canvas, antique gold, cream/ivory surfaces, deep maroon
   editorial accent) composed onto the same PP Engines type system used
   across /creativetech (DM Serif Display / Barlow / Barlow Condensed /
   JetBrains Mono) so this reads as the same platform, recoloured for Magnum.
   ========================================================================== */
:root {
  --mag-choc: #17110a;
  --mag-choc-2: #241a10;
  --mag-cream: #fbf3e4;
  --mag-cream-2: #f4e6c5;
  --mag-gold: #c8a24a;
  --mag-gold-bright: #d9b65c;
  --mag-maroon: #5b2020;
  --mag-ink: #1b120a;
  --mag-ink-secondary: rgba(27, 18, 10, 0.72);
  --mag-ink-tertiary: rgba(27, 18, 10, 0.55);
  --mag-ink-muted: rgba(27, 18, 10, 0.38);
  --mag-hairline: rgba(27, 18, 10, 0.1);
  --mag-quiet: rgba(27, 18, 10, 0.16);

  --mag-success: #3f7a4e;
  --mag-error: #a3341f;

  --mag-r-sm: 10px;
  --mag-r-md: 18px;
  --mag-r-lg: 24px;
  --mag-r-pill: 9999px;

  --mag-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --mag-serif: "DM Serif Display", Georgia, serif;
  --mag-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mag-cond: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mag-terracotta: #b5502f;
  --mag-mustard: #d9a441;
  --mag-link: #8a3a1f;

  --mag-shadow: 0 24px 60px rgba(27, 18, 10, 0.14);

  /* ---- TMICC master-brand palette (corporate.magnumicecream.com) ----------
     The Magnum Ice Cream Company corporate identity: warm cream canvas,
     near-black ink, the red heart, and the pastel product-tile set used
     behind pack shots on the corporate site. Primary register for the
     portfolio-wide (9-brand) surfaces; the chocolate/gold set above stays
     as the Magnum-brand accent within it. */
  --tmicc-cream: #faf3ec;
  --tmicc-ink: #1d1d1b;
  --tmicc-red: #e3242b;
  --tile-sage: #c5cfa4;
  --tile-butter: #f7d65f;
  --tile-powder: #c3d7ea;
  --tile-blush: #f2c3ce;
  --tile-mint: #bfe0ce;
  --tile-olive: #cfcf9f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--mag-ink);
  font-family: var(--mag-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  font-family: var(--mag-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--mag-ink-muted);
}

h1.display, h2.display {
  font-family: var(--mag-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.glass {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--mag-shadow);
  backdrop-filter: blur(20px);
  border-radius: var(--mag-r-lg);
}

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--mag-r-pill);
  cursor: pointer; font-weight: 700; font-family: var(--mag-body);
  transition: transform .2s ease, box-shadow .2s ease; text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button-gold { background: linear-gradient(135deg, var(--mag-gold-bright), var(--mag-gold)); color: var(--mag-ink); box-shadow: 0 14px 30px rgba(200, 162, 74, 0.35); }
.button-ghost { border: 1px solid var(--mag-hairline); background: rgba(255,255,255,.6); color: var(--mag-ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
  border-radius: var(--mag-r-pill); border: 1px solid var(--mag-hairline);
  font-family: var(--mag-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 11px; color: var(--mag-ink-secondary); background: rgba(255,255,255,.6);
}
.chip-live { color: #fff; background: var(--mag-maroon); border-color: var(--mag-maroon); }

.card {
  background: #fff;
  border: 1px solid var(--mag-hairline);
  box-shadow: 0 8px 24px rgba(27,18,10,.06);
  border-radius: var(--mag-r-md);
  padding: 22px;
}

.mono { font-family: var(--mag-mono); }
.hairline { height: 1px; background: var(--mag-hairline); border: 0; }

/* Visible keyboard-focus treatment for the shared pill/chip/button family —
   added per design-audit 2026-07-02 (browser default outlines clip on pill radii). */
.chip-pick:focus-visible, .region-toggle:focus-visible, .pill-btn:focus-visible,
.why-btn:focus-visible, .fix-btn:focus-visible, .quick-pick:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mag-gold);
  outline-offset: 2px;
}