/* =====================================================================
   Leakproof design kit · tokens.css
   Direction: "The red pen audit". The site is a calm, typeset audit in
   blue-black ink. The only red, and the only thing that moves, is the
   editor's pen: red always means "the pen found something".

   Every token is prefixed --lp- so this file can sit next to the
   platform's app.css (which defines --ink, --paper, --leak ...) without
   collisions. Light values on bare :root; dark values twice (system
   preference unless the page forces light, and forced dark).
   Load order: tokens.css, then kit.css, then site.css (public) or admin.css (admin).

   THE MEANING SYSTEM (one meaning per colour, on every screen; docs/ADMIN-UI.md "The kit"):
   - Red pen (--lp-pen, --lp-leak): a LEAK only: its mark, its marker, its count, its LEAK tag,
     plus the one hero highlight around "leaks". Never decoration, never "needs you", never "free".
   - Calm blue (--lp-opp): a MONEY OPPORTUNITY only (upside, never an error). It is not a link
     colour: links are ink with an underline (--lp-link).
   - Muted green (--lp-fine): FINE.
   - Dashed grey (--lp-unknown): ONLY A REAL LEAD CAN CHECK (or we couldn't see it from outside).
   - Ink (--lp-ink): everything else, and in the admin "needs you" (a solid ink pill).
   - Decorative handwriting ("start here", "after the click", the monthly arc) is ink: --lp-pen-note.
   - --lp-accent (ballpoint blue) is for focus rings and the live-scan progress bar only.

   THE SCALE (locked; new code uses these, old files migrate as they are touched):
   display 88 / 60 / 40 / 26 / 20 · body 20 (lede) / 17.5 / 15 / 13.5 · mono 12.5 / 11.5 ·
   weights 400 / 600 body, 760 / 840 display, 500 / 600 mono · stretch 78% display, 87.5% mono ·
   spacing 4 / 8 / 12 / 16 / 24 / 32 / 48 / 72 / 112 · radius 3 / 6 / pill.
   ===================================================================== */

:root {
  /* ---- paper and ink ---- */
  --lp-paper: #f8f9fc;          /* page background */
  --lp-sheet: #ffffff;          /* raised sheets: worksheet, gate, figures */
  --lp-sunk: #eef0f6;           /* inset wells, table heads */
  --lp-ink: #141836;            /* text, rules that matter, primary button */
  --lp-ink-hover: #283067;
  --lp-ink-2: #454b6d;          /* secondary text, labels (AA on paper) */
  --lp-ink-3: #62688a;          /* tertiary: placeholders, pending rows (AA on paper) */
  --lp-rule: #e0e4ee;           /* hairlines */
  --lp-rule-2: #c3c9d9;         /* input borders, stronger hairlines */
  --lp-margin: #d2e8f2;         /* non-photo blue: margin line, rulings (never a status) */
  --lp-margin-2: #7fb9d3;       /* non-photo blue ticks */
  --lp-accent: #2b3fd0;         /* ballpoint blue: focus rings and the live-scan bar ONLY */
  --lp-on-ink: #f8f9fc;         /* text on ink */
  --lp-link: var(--lp-ink);     /* links: ink with an underline, never a status colour */

  /* ---- inverse surfaces: dark in BOTH themes (video card, outgoing bubble, ladder numbers) ---- */
  --lp-surface-inverse: #141836;
  --lp-on-inverse: #f8f9fc;
  --lp-on-inverse-2: rgba(248, 249, 252, .72);
  --lp-inverse-rim: #141836;    /* the 1px edge that keeps it apart from a dark page */
  /* ---- devices: phone shells and notches (pictures of a device: never flip to white) ---- */
  --lp-device: #171b34;
  --lp-device-rim: rgba(255, 255, 255, .08);
  /* ---- the lock-screen notification card (a picture of a phone: the same in both themes) ---- */
  --lp-notif-bg: rgba(246, 247, 252, .94);
  --lp-notif-ink: #141836;
  --lp-notif-ink-2: #454b6d;
  --lp-notif-meta: #5b6178;
  --lp-notif-glyph: #141836;    /* monochrome app icons */
  --lp-notif-glyph-bg: #e3e6f0;
  --lp-notif-leak: #b8111f;     /* a flagged notification's title (the card is always light) */
  --lp-notif-fine: #1d6b47;
  --lp-notif-warn: #6b4800;
  --lp-notif-pen: #d3162a;      /* the flagged notification's 2px pen ring */

  /* ---- the pen (marks only) and the pencil (neutral notes) ---- */
  --lp-pen: #d3162a;
  --lp-on-pen: #ffffff;
  --lp-pen-soft: rgba(211, 22, 42, .10);
  --lp-pen-halo: rgba(255, 255, 255, .8);   /* keeps strokes readable on dark screenshots */
  --lp-pen-note: var(--lp-ink); /* decorative handwriting: ink, never red */
  --lp-pencil: #7d8299;         /* info markers, placeholder circle */
  --lp-hl: #ffe24f;             /* highlighter */
  --lp-hl-opacity: .6;

  /* ---- status: the four meanings (text + soft background + line; text is AA on paper) ---- */
  --lp-leak: #d3162a;      --lp-leak-bg: #fde7ea;   --lp-leak-line: #f0b2ba;
  --lp-opp: #1f6aa5;       --lp-opp-bg: #e4f0f9;    --lp-opp-line: #a9cce8;
  --lp-fine: #2a7d55;      --lp-fine-bg: #e3f2ea;   --lp-fine-line: #a7d3bc;
  --lp-unknown: #7d8299;   --lp-unknown-bg: transparent; --lp-unknown-line: #9aa0b8;  /* drawn dashed */
  --lp-pending: #62688a;   /* not run yet, waiting */
  /* older names, kept as aliases (one meaning each) */
  --lp-ok: var(--lp-fine); --lp-ok-bg: var(--lp-fine-bg);
  --lp-warn: #6b4800;   --lp-warn-bg: #fff0a0;     /* amber: the admin's "waiting" only */
  --lp-info: #3d4466;   --lp-info-bg: #eceef5;
  --lp-skip: #5c6283;   --lp-skip-bg: transparent;

  /* ---- depth ---- */
  --lp-shadow: 0 1px 1px rgba(20, 24, 54, .05), 0 14px 34px -20px rgba(20, 24, 54, .32);
  --lp-shadow-sm: 0 1px 0 rgba(20, 24, 54, .06);
  --lp-shot-filter: none;       /* screenshots of the visitor's page */
  --lp-chrome-bg: #eef0f5; --lp-chrome-line: #dde1ea; --lp-chrome-ink: #5b6178; --lp-chrome-field: #ffffff;

  /* ---- type ---- */
  --lp-f-display: "Mona Sans", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --lp-f-body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lp-f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --lp-f-pen: "Covered By Your Grace", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --lp-display-stretch: 78%;    /* Mona Sans width axis: condensed */
  --lp-mono-stretch: 87.5%;
  /* the figure role: every KPI and count (kit.css .lp-figure). Mono stays for IDs, times, durations. */
  --lp-f-figure: var(--lp-f-display);
  --lp-figure-stretch: 78%;
  --lp-figure-weight: 760;

  /* display scale */
  --lp-t-d1: 88px; --lp-t-d2: 60px; --lp-t-d3: 40px; --lp-t-d4: 26px; --lp-t-d5: 20px;
  --lp-t-h1: clamp(46px, 5.9vw, 88px);      /* d1 */
  --lp-t-h2: clamp(34px, 4.2vw, 60px);      /* d2 */
  --lp-t-h3: clamp(22px, 1.8vw, 26px);      /* d4 */
  --lp-t-title: clamp(38px, 5.6vw, 84px);   /* the scanned domain, the report title */
  /* body scale */
  --lp-t-lede: clamp(18px, 1.4vw, 20px);
  --lp-t-body: 17.5px;
  --lp-t-small: 15px;
  --lp-t-xs: 13.5px;
  /* mono labels: never below 11.5 px (10 px only inside a scaled-down mockup) */
  --lp-t-label: 12.5px;
  --lp-t-label-sm: 11.5px;
  --lp-t-pen: clamp(21px, 1.6vw, 25px);     /* pen notes: never below 20 px, max 5 words */
  --lp-t-marker: 16px;                       /* the numbered pen marker (MarkerBadge) */
  --lp-lh-body: 1.6;
  --lp-measure: 65ch;
  /* weights */
  --lp-w-body: 400; --lp-w-strong: 600;
  --lp-w-display: 760; --lp-w-display-heavy: 840;
  --lp-w-mono: 500; --lp-w-mono-strong: 600;

  /* ---- space and shape ---- */
  --lp-s-1: 4px; --lp-s-2: 8px; --lp-s-3: 12px; --lp-s-4: 16px; --lp-s-5: 24px;
  --lp-s-6: 32px; --lp-s-7: 48px; --lp-s-8: 72px; --lp-s-9: 112px;
  --lp-gutter: clamp(16px, 4vw, 56px);
  --lp-wrap: 1320px;
  --lp-wrap-wide: 1440px;
  --lp-head-h: 64px;
  --lp-r-1: 3px;                 /* buttons, inputs, chips, tags */
  --lp-r-2: 6px;                 /* sheets, figures, windows, panels (admin too) */
  --lp-r-window: 6px;            /* the mockup windows */
  --lp-r-pill: 999px;            /* numeric count badges only */
  --lp-pen-w: 2.5;               /* default pen stroke (svg units = px) */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lp-paper: #0c0f21; --lp-sheet: #141933; --lp-sunk: #10142a;
    --lp-ink: #e9ebf6; --lp-ink-hover: #ffffff; --lp-ink-2: #b0b6d2; --lp-ink-3: #8d93b4;
    --lp-rule: #252b4d; --lp-rule-2: #3a4270; --lp-margin: #1b2b4c; --lp-margin-2: #4a7ea3;
    --lp-accent: #a3acff; --lp-on-ink: #0c0f21;
    --lp-surface-inverse: #1b2140; --lp-on-inverse: #f8f9fc; --lp-inverse-rim: #2f376a;
    --lp-device: #2a3054; --lp-device-rim: rgba(255, 255, 255, .18);
    --lp-pen: #ff3b4e; --lp-pen-soft: rgba(255, 59, 78, .16); --lp-pen-halo: rgba(255, 255, 255, .62);
    --lp-pencil: #9aa0bf; --lp-hl: #ffd84a; --lp-hl-opacity: .45;
    --lp-leak: #ff3b4e; --lp-leak-bg: #3d1524; --lp-leak-line: #7a2434;
    --lp-opp: #6cb4ea; --lp-opp-bg: #12304a; --lp-opp-line: #2a5a80;
    --lp-fine: #5cc795; --lp-fine-bg: #10301f; --lp-fine-line: #2c6a4b;
    --lp-unknown: #9aa0bf; --lp-unknown-line: #6d7396; --lp-pending: #8d93b4;
    --lp-warn: #ffd866; --lp-warn-bg: #3b3213;
    --lp-info: #c3c8e3; --lp-info-bg: #1f2444; --lp-skip: #9ba1c2;
    --lp-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .75);
    --lp-shadow-sm: 0 1px 0 rgba(0, 0, 0, .3);
    --lp-shot-filter: brightness(.9);
    --lp-chrome-bg: #1b2140; --lp-chrome-line: #2a3160; --lp-chrome-ink: #a6acc9; --lp-chrome-field: #10142a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lp-paper: #0c0f21; --lp-sheet: #141933; --lp-sunk: #10142a;
  --lp-ink: #e9ebf6; --lp-ink-hover: #ffffff; --lp-ink-2: #b0b6d2; --lp-ink-3: #8d93b4;
  --lp-rule: #252b4d; --lp-rule-2: #3a4270; --lp-margin: #1b2b4c; --lp-margin-2: #4a7ea3;
  --lp-accent: #a3acff; --lp-on-ink: #0c0f21;
  --lp-surface-inverse: #1b2140; --lp-on-inverse: #f8f9fc; --lp-inverse-rim: #2f376a;
  --lp-device: #2a3054; --lp-device-rim: rgba(255, 255, 255, .18);
  --lp-pen: #ff3b4e; --lp-pen-soft: rgba(255, 59, 78, .16); --lp-pen-halo: rgba(255, 255, 255, .62);
  --lp-pencil: #9aa0bf; --lp-hl: #ffd84a; --lp-hl-opacity: .45;
  --lp-leak: #ff3b4e; --lp-leak-bg: #3d1524; --lp-leak-line: #7a2434;
  --lp-opp: #6cb4ea; --lp-opp-bg: #12304a; --lp-opp-line: #2a5a80;
  --lp-fine: #5cc795; --lp-fine-bg: #10301f; --lp-fine-line: #2c6a4b;
  --lp-unknown: #9aa0bf; --lp-unknown-line: #6d7396; --lp-pending: #8d93b4;
  --lp-warn: #ffd866; --lp-warn-bg: #3b3213;
  --lp-info: #c3c8e3; --lp-info-bg: #1f2444; --lp-skip: #9ba1c2;
  --lp-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .75);
  --lp-shadow-sm: 0 1px 0 rgba(0, 0, 0, .3);
  --lp-shot-filter: brightness(.9);
  --lp-chrome-bg: #1b2140; --lp-chrome-line: #2a3160; --lp-chrome-ink: #a6acc9; --lp-chrome-field: #10142a;
  color-scheme: dark;
}