/* MatchMonk theme — the only file that differs between product sites.
   Structure lives in /shared/base.css. See its header for the contract.

   Palette from "Matchmonk Style Guide - updated" (2026-09): Primary #fc7186,
   Dark #4b051a, Light #feadaa. The Matchmonk_Logo_V1_1 SVG is exactly two
   colours, #fff and #fc7186, so the guide Primary and the logo agree. Every
   pair below was measured, not eyeballed.

   Note the ramp crosses the red boundary — Dark 342deg, Primary 351deg, Light
   2deg — so the light tint reads a touch more salmon than the pink Primary.
   That is the guide's own relationship, left as specified rather than
   "corrected"; ScrapeMonk taught us the perceived mismatch there came from the
   *brand* being off-guide, not from the guide's own Light. */
:root {
  /* Brand ramp: action → mid accent → light accent */
  --brand: #fc7186; /* guide Primary — the logo's pink */
  --brand-rgb: 252, 113, 134;
  --brand-2: #fc7186; /* links, numbers, featured borders: reads 6.8:1 on --bg */
  --brand-3: #feadaa; /* guide Light */

  /* Dark surfaces. Maroon-tinted rather than the guide Dark itself: #4b051a is
     too saturated to sit behind a whole page, so it does the work it is good at
     — ink on brand, and ink on the light panels. */
  --bg: #1e1218;
  --bg-footer: #180e13;
  --surface: #2b1a22;
  --surface-2: #24151c;

  /* Borders, weakest → strongest */
  --border-subtle: #2f1e26;
  --border: #3d2932;
  --border-strong: #6b3a49;

  /* Text on dark, brightest → faintest. On --bg: 16.7 / 15.0 / 10.0 / 8.6 /
     5.5 / 4.9:1 — every step clears AA, including --ink-6, which carries the
     12px mono eyebrows. The two older themes ship 3.1:1 there and want the
     same nudge; tracked separately. */
  --ink: #f4f5f6;
  --ink-2: #f3e6ea;
  --ink-3: #d6b9c1;
  --ink-4: #c9aab3;
  --ink-5: #a8848f;
  --ink-6: #9c7d86;
  --label: #f0b3bf;

  /* Inverted (light) panels: guide Light (#feadaa) with guide Dark (#4b051a)
     as ink — a lighter tone of the brand, not white boxes. Dark on Light 8.8:1. */
  --panel: #feadaa;
  --panel-ink: #4b051a;
  --panel-ink-2: #7a3244;
  --panel-accent: #4b051a;
  --panel-border: rgba(75, 5, 26, 0.16);
  --panel-card: rgba(255, 255, 255, 0.55);

  /* Brand-tinted neutrals (must be re-derived per product, not reused) */
  --nav-bg: rgba(30, 18, 24, 0.82);
  --surface-raised: #38222c;
  --ink-self: #e0c4cb;
  --dot-on-cta: rgba(254, 173, 170, 0.18);

  /* Big CTA band gradient */
  --cta-from: rgba(252, 113, 134, 0.35);
  --cta-to: rgba(75, 5, 26, 0.9);
  --cta-ink: #7e3b4b;

  /* Sibling-product accents, used for hover on the MonkSuite strip */
  --accent-scrapemonk: #c182fd; /* each sibling's own guide Primary */
  --accent-tidymonk: #818bf9;
  --accent-matchmonk: #fc7186;
  --accent-pricemonk: #00b5d4;

  /* Ink for text sitting ON --brand. The guide Primary is light, so white would
     read 2.7:1 and fail; the guide Dark gives 5.9:1. Same shape as PriceMonk,
     ScrapeMonk and TidyMonk, whose light brands take a dark ink for the same
     reason. */
  --btn-ink: #4b051a; /* guide Dark */

  /* Type. Montserrat per the product style guides — see the note in
     pricemonk/theme.css for why this diverges from monksuite.io. */
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body); /* one sans; no separate display face */
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Layout. MonkSuite's .container is `max-width: 1180px; padding: 0 32px`
     (border-box), so its content column is 1180 - 2*32 = 1116px. Here the
     gutter sits on the section and --wrap caps the inner container, so --wrap
     is that *content* width, not the box width. 1116 + 32 reproduces
     monksuite.io's edges and column at every viewport. */
  --wrap: 1116px;
  --gutter: 32px;
  --nav-h: 70px;
}