/*
 * ROI Magnet CRM Help: design tokens.
 * Every colour, size and shadow on the help site comes from here. help.css only uses these names.
 * Values match the approved sample (.agent/briefs/HELP-sample-v3.html). Change a value here, never in help.css.
 */
:root {
  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fs-xs: 12px;      /* small uppercase labels (menu chapter names, table heads) */
  --fs-sm: 13.5px;    /* captions, "On this page", breadcrumb */
  --fs-ui: 14.5px;    /* menu links, buttons, search */
  --fs-body: 16px;    /* reading text */
  --fs-lead: 17px;    /* the one-line summary under the title */
  --fs-h3: 17.5px;
  --fs-h2: 21px;
  --fs-h1: 32px;
  --lh-body: 1.65;
  --lh-tight: 1.2;
  --tracking-caps: .06em;

  /* Colour: text and surfaces */
  --ink: #16181d;     /* main text */
  --muted: #5b6170;   /* secondary text */
  --faint: #6b7182;   /* captions and labels (darker than the sample's #8a90a0 so it passes WCAG AA on white) */
  --line: #e6e8ee;    /* borders and rules */
  --soft: #f6f7fa;    /* table heads, inputs, pills */
  --stage: #eef0f5;   /* the soft background behind every picture */
  --paper: #ffffff;   /* page background */

  /* Colour: brand and status */
  --brand: #4b63e6;
  --brand-strong: #3a50cc;          /* hover and visited */
  --brand-soft: #eef1ff;            /* current menu item */
  --brand-ring: rgba(75, 99, 230, .85);
  --focus: #2b45d6;                 /* keyboard focus outline */
  --tip: #0f7a55;  --tip-soft: #ecf8f2;  --tip-line: #bfe6d4;
  --warn: #9a5b00; --warn-soft: #fff7e8;

  /* Spacing (4px steps) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 38px; --s8: 48px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 8px 28px rgba(20, 24, 40, .10);
  --shadow-pop: 0 4px 12px rgba(20, 24, 40, .10), 0 18px 48px rgba(20, 24, 40, .16);

  /* Layout */
  --header-h: 59px;
  --nav-w: 250px;
  --toc-w: 210px;
  --content-max: 820px;
  --site-max: 1320px;

  /* Picture components */
  --marker-size: 22px;                       /* numbered marker circle */
  --marker-font: 600 12px/22px var(--font);
  --marker-edge: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .25);
  --ring-width: 2px;                         /* thin outline in "Then" pictures */
  --ring-radius: 7px;
  --spot-radius: 8px;
  --spot-dim: rgba(10, 12, 20, .55);         /* how dark the rest of a "Where" picture goes */
  --shot-pad: 28px;                          /* stage padding around a picture */
}