/* ScrapeMonk theme — the only file that differs between product sites.
   Structure lives in /shared/base.css. See its header for the contract. */
:root {
  /* Brand ramp: action → mid accent → light accent.
     The ramp used to start at a muted periwinkle (#6c60b6) that appears nowhere
     in the brand: the Scrapemonk_Logo_V1 SVG is exactly two colours, #fff and
     #c182fd, and the CTA gradient below was already built on #c182fd. Petra read
     the button as "way off the logo" for that reason. Now the ramp starts at the
     guide Primary, the way PriceMonk's starts at its own (#00b5d4). */
  --brand: #c182fd; /* guide Primary — the logo's purple */
  --brand-rgb: 193, 130, 253;
  --brand-2: #c182fd; /* links, numbers, featured borders: reads 6.9:1 on --bg */
  --brand-3: #e2c2ff; /* guide Light — the natural light tint of the Primary */

  /* Dark surfaces */
  --bg: #16131f;
  --bg-footer: #120f1a;
  --surface: #201a2b;
  --surface-2: #1b1626;

  /* Borders, weakest → strongest */
  --border-subtle: #262030;
  --border: #322a42;
  --border-strong: #43376b;

  /* Text on dark, brightest → faintest */
  --ink: #f4f5f6;
  --ink-2: #e8e4f0;
  --ink-3: #b7acd0;
  --ink-4: #a79cc2;
  --ink-5: #8a7fa8;
  --ink-6: #6a5f85;
  --label: #b3a9e0;

  /* Inverted (light) panels: guide Light (#e2c2ff) with guide Dark (#3b0862)
     as ink — a lighter tone of the brand, not white boxes. Dark on Light 9.6:1. */
  --panel: #e2c2ff;
  --panel-ink: #3b0862;
  --panel-ink-2: #4a3b86;
  --panel-accent: #3b0862;
  --panel-border: rgba(59, 8, 98, 0.16);
  --panel-card: rgba(255, 255, 255, 0.55);

  /* Brand-tinted neutrals (must be re-derived per product, not reused) */
  --nav-bg: rgba(22, 19, 31, 0.82);
  --surface-raised: #2a2140;
  --ink-self: #c9c2e0;
  --dot-on-cta: rgba(226, 194, 255, 0.18);

  /* Big CTA band gradient */
  --cta-from: rgba(193, 130, 253, 0.35);
  --cta-to: rgba(59, 8, 98, 0.9);
  --cta-ink: #463c7e;

  /* 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 a *light* purple, so
     white would read 2.7:1 and fail; the guide Dark gives 5.6:1. Same shape as
     PriceMonk, whose light teal takes a dark ink for the same reason. */
  --btn-ink: #3b0862; /* 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;
}