/* tokens.css — campaign-desk (Pressmark, the email desk of Fernhill Coffee). Read from the open-source campaign tools
   studied (a sidebar of a few desks, a campaigns table whose rows carry status and send stats, lists and segments as
   their own place, an area chart of sends against opens, stat cards with a change chip) and moved to its own system:
   a cool grey page, a pale blue sidebar where the open desk is a raised white tab, one blue ink for what a person acts
   on. Bricolage Grotesque sets titles and every figure; Be Vietnam Pro, open and even, carries rows and forms. */
:root {
  color-scheme: light;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-num: 'Bricolage Grotesque', system-ui, sans-serif;
  --display-weight: 400; --body-weight: 400; --num-weight: 400; --label-weight: 500;
  --display-tracking: -0.012em; --num-tracking: -0.02em;
  --h2-weight: 400; --h2-tracking: -0.004em;

  --bg: #f3f4f6;
  --surface: #ffffff;
  --raised: #ffffff;
  --sunken: #edeff3;
  --ink: #191c22;
  --muted: #576173;
  --faint: #8a94a6;
  --line: #e6e8ed;
  --line-strong: #d2d5dd;
  --accent: #1a46d4;
  --accent-ink: #1f41a0;
  --on-accent: #ffffff;
  --accent-soft: #e6ebf9;
  --s1: #1a46d4; --s2: #58c8fd; --s3: #2a3db2; --s4: #3f7fd6; --s5: #86bff5; --s6: #aeb3bf;
  --pos: #23845a; --neg: #c0392b; --warn: #b8700b; --info: #2f6fd0;
  --ring: #1a46d4;
  --link: var(--accent-ink);

  --nav-bg: #e8ebf4; --nav-ink: #22252e; --nav-muted: #677388; --nav-line: #d6dbe9;
  --nav-active-bg: #ffffff; --nav-active-ink: #1f41a0;
  --nav-w: 248px; --rail-w: 76px; --nav-pad: 16px; --nav-item-h: 40px; --nav-radius: 10px;

  --top-h: 66px; --page-pad: 28px; --page-max: 1540px;
  --gap: 20px; --pad: 22px;
  --radius: 14px; --radius-sm: 9px; --control-h: 38px;
  --card-border: 1px solid var(--line); --card-shadow: 0 1px 0 rgb(23 26 36 / 0.03);
  --pop-shadow: 0 28px 56px -22px rgb(16 26 52 / 0.32), 0 2px 6px rgb(23 26 36 / 0.06);
  --title-size: 31px; --h2-size: 17px; --kpi-size: 34px; --text-size: 14px; --small-size: 12.5px;
  --grid-line: #eaecf1; --axis-ink: var(--faint); --chart-h: 240px;
  --tip-bg: #191c22; --tip-ink: #f6f7fb;
  --icon-size: 18px; --icon-stroke: 1.75;
  --search-bg: var(--surface); --search-border: 1px solid var(--line); --search-radius: 10px;
  --ib-bg: transparent; --ib-border: 0;
  --btn-radius: 10px; --chip-radius: 999px;

  /* the open desk is a raised tab, not a filled pill */
  --nav-active-shadow: 0 1px 2px rgb(16 26 52 / 0.08), 0 6px 14px -8px rgb(16 26 52 / 0.24);
  /* the inbox line every campaign is first seen as */
  --inbox-bg: #f9fafc; --inbox-unread: #1a46d4;
  /* the send stages: delivered, opened, clicked, ordered */
  --stage-del: #c2c6d0; --stage-open: #1a46d4; --stage-click: #3f7fd6; --stage-order: #2a3db2;
  /* campaign kinds: the same colour as their slice of the donut */
  --kind-news: var(--s1); --kind-launch: var(--s2); --kind-promo: var(--s3); --kind-guide: var(--s4); --kind-whole: var(--s5); --kind-event: #818795;
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #111215;
  --surface: #181a1e;
  --raised: #1e2026;
  --sunken: #0e0f12;
  --ink: #edeff6;
  --muted: #a9adb6;
  --faint: #6d788c;
  --line: #272a30;
  --line-strong: #343840;
  --accent: #79afff;
  --accent-ink: #9cb3f3;
  --on-accent: #09132d;
  --accent-soft: #242a37;
  --s1: #79afff; --s2: #58c8fd; --s3: #5097ff; --s4: #86bff5; --s5: #3f7fd6; --s6: #6a768c;
  --pos: #6fcf9c; --neg: #f28b7f; --warn: #f0b65c; --info: #79afff;
  --ring: #9cb3f3;
  --nav-bg: #14161b; --nav-ink: #e8ebf4; --nav-muted: #8f9aad; --nav-line: rgb(255 255 255 / 0.06);
  --nav-active-bg: #23262e; --nav-active-ink: #bbcbf7;
  --nav-active-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --card-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  --grid-line: #24272d;
  --tip-bg: #edeff6; --tip-ink: #111215;
  --inbox-bg: #13151a; --inbox-unread: #7c9aec;
  --stage-del: #50555f; --stage-open: #79afff; --stage-click: #58c8fd; --stage-order: #5097ff;
  --kind-event: #999ea9;
}
