/* WrapDesk design tokens — the one source (owner: wrapdesk-design; CONTRACTS.md § 3).
   The public site and the PM dashboard each keep a copy at css/tokens.css and refresh it by copying this file; they never edit it.
   No hex anywhere outside this file. Taken from wrap-site/css/tokens.css (itself from the Wrap mock), plus the dashboard block at the end. */
:root {
  color-scheme: light;
  --ms-bg: #f6f6f8; --ms-surface: #ffffff; --ms-surface-2: #eeeef4; --ms-surface-3: #ececf3;
  --ms-border: #e7e7ee; --ms-border-strong: #dcdce4; --ms-row-line: #f0f0f4;
  --ms-text: #1b1b23; --ms-text-2: #3a3a48; --ms-text-3: #5f5f70; --ms-muted: #6b6b7b;
  --ms-accent: #1f3470; --ms-accent-hover: #172757; --ms-accent-text: #ffffff; --ms-link: #1f3470;
  --ms-danger: #c43d3d; --ms-danger-bg: rgba(240,122,122,.10);
  --ms-warn: #a65709;   --ms-warn-bg: rgba(240,163,94,.14);
  --ms-info: #1f3470;   --ms-info-bg: rgba(31,52,112,.09);
  --ms-ok: #1b7d4c;     --ms-ok-bg: rgba(76,195,138,.10);
  --ms-font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ms-fs-xs: 12px; --ms-fs-sm: 13px; --ms-fs: 14px; --ms-fs-md: 15px;
  --ms-r-sm: 8px; --ms-r: 10px; --ms-r-lg: 14px; --ms-r-pill: 999px;
  --ink: #2b3f8c;                 /* the pen on a drawn document, nowhere else */
  --island: #1b2447;              /* the dark pod; the navy, deeper */
  --island-2: rgba(255,255,255,.14);
  --rail: 240px; --gutter: 24px;
  /* the Today overview's short names: aliases of the one set above, so the two can never drift. Light only: Vlad wants no dark mode. */
  --bg: var(--ms-bg); --surface: var(--ms-surface); --line: var(--ms-border); --text: var(--ms-text); --text-2: var(--ms-text-2); --muted: var(--ms-muted); --faint: #d9d9e2;
  --accent: var(--ms-accent); --hover: var(--ms-surface-2); --red: var(--ms-danger); --amber: var(--ms-warn); --green: var(--ms-ok);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* the site's type scale and rhythm (the design pass of 4 Nov): body 15, labels 13 sans medium, h1 56/36, h2 32/28, h3 20 */
  --fs-body: 15px; --fs-small: 13px; --fs-label: 13px; --fs-h4: 16px; --fs-h3: 20px; --fs-h2: 32px; --fs-h2-m: 28px; --fs-h1: 56px; --fs-h1-m: 36px; --fs-title: 40px; --fs-title-m: 30px;
  --fs-lead: 18px; --fs-quote: 26px; --fs-quote-m: 22px; --fs-fig: 52px; --fs-fig-m: 44px; --fs-btn-xl: 16px; --fs-price: 44px; --fs-price-m: 40px; /* the pricing page's tier price */
  --fs-mock: 12px; --fs-mock-sm: 11px; --fs-mock-xs: 10px; --fs-mock-lg: 13px;
  --sec-gap: 112px; --sec-gap-m: 72px; --site-w: 1120px; --site-pad: 24px; --site-pad-m: 20px; --tap: 32px; --tap-lg: 44px;
  --shadow-frame: 0 1px 2px rgba(27,27,35,.05), 0 18px 48px -14px rgba(27,27,35,.16); /* the product frame only: Vlad's one exception to "borders, never shadows" */
  --ms-danger-hover: #a93333; --island-red: #ffb4b4; --island-amber: #ffd59a; --island-green: #8fe0b0; /* the app's dark pod, kept out of the stylesheet's hexes */
  /* the carousel's animated slides (round one, 4 Nov): one loop, the stage's height, the row heights the sort and the move translate by, the drawn time card's type (it scales with the stage), the Used-by logo height */
  --loop: 12s; --stage-h: 392px; --stage-h-m: 448px; --row-h: 26px; --row-h-m: 34px; --gh-h: 22px; --q-open: 80px; --q-done: 28px;
  --fs-mock-xxs: 9px; --cc-fs: clamp(4.5px, 1.45cqw, 7px); --ph-w: 236px; --ph-r: 26px; --logo-h: 28px;
  /* round two (4 Nov): the tablet frame's radius, an open day row's height (the four time pickers and the total), the workflow videos' stage height, the small phone in the first video */
  --tab-r: 18px; --day-open: 80px; --wv-h: 312px; --pm-w: 150px; --cc-fs-v: clamp(4.5px, 1.45cqw, 4.7px); --pdr-top: 73px; --pdr-top-m: 71px; /* the person's drawer starts under the Crew tab's filter strip (the phone's is 2px shorter) */
  /* one tint per job, for the mark beside its name only (the seed mockup's tints; no orange or red, which read as urgency) */
  --t1: #2f7de1; --t2: #1fb3c7; --t3: #4f7f9a; --t4: #9a6bb0; --t5: #e0507a; --t6: #3fb67a; --t7: #8c6ee8; --t8: #8a94a6;
  /* the PM dashboard (wrapdesk-design, Nov 5 2026): the column widths, the bare sign-in card, the top bar, the crew row edge. No new colour. */
  --dash-w: 1120px; --dash-col: 720px; --dash-side: 360px; --bare-w: 400px; --bar-h: 56px; --edge: 3px;
}
*, *::before, *::after { box-sizing: border-box; }