/* Design tokens: the light and dark palettes. */

/* Work OS. Tokens and frame ported from the design handoff. */

/* The device's own font. No web fonts are loaded, so the app renders the same
   whether or not Google Fonts is reachable and needs no outside request at all.
   Cyrillic and Latin come from one family on every platform. */
:root,
[data-theme="light"] {
  --table-gap: 16px; /* column gap shared by list headings, rows and nested rows */
  --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg: linear-gradient(135deg,#eceef3 0%,#e4e9f2 60%,#e6ecf5 100%);
  --bg-solid: #f4f5f9;
  --panel: #e3e6ee;
  --hover: #e6ecf7;
  --ink-hover: #2b2e38;
  --hover-ring: rgba(17,17,20,.16);
  --row: #f5f6f9;
  --hatch: repeating-linear-gradient(135deg,#f5f6f9 0 7px,#e8eaf0 7px 14px);
  --red-line: #f6c9d2;
  --card: #ffffff;
  --card2: #f4f5f8;
  --text: #111114;
  --muted: #5b6070;
  --line: #dde1ea;
  --ink: #111114;
  --ink-text: #ffffff;
  --red: #ff3b5c;
  --red-bg: #ffe9ed;
  --orange: #f58220;
  --orange-bg: #fff1e6;
  --amber: #f5b000; /* yellow ring around a dormant client */
  --blue: #1a8cff;
  --blue-bg: #eaf6fe;
  --green: #00b341;
  --green-bg: #e9f8f1;
  --purple: #7b1fe8;
  --pink-bg: #fce9fa;

  /* Two jobs, two tokens. The bright hues above stay for icons, dots, bars and
     fills; the *-ink tokens are the only ones text is ever drawn in, darkened
     until 12px text on --card, --row, --card2 and the soft *-bg tints clears
     4.5:1. The *-fill pair is a background that carries white text: --green
     and --red are too light for that, so pills and solid buttons use these.
     --on-fill is the label colour that goes on a *-fill. */
  --green-ink: #007535;   /* 5.84:1 on white, 4.94:1 on the .tag.green tint */
  --orange-ink: #a5520a;  /* 5.51:1 on white, 4.98:1 on --orange-bg */
  --red-ink: #c4102f;     /* 6.07:1 on white, 5.24:1 on --red-bg */
  --blue-ink: #0b66c3;    /* 5.67:1 on white, 5.17:1 on --blue-bg */
  --amber-ink: #a87a00;   /* the dormant ring: 3.85:1 on white, 3.57:1 on --row */
  --purple-ink: #7b1fe8;  /* 5.67:1 on --pink-bg */
  --green-fill: #00803a;  /* white on it: 5.06:1 */
  --red-fill: #d81f43;    /* white on it: 5.00:1 */
  --on-fill: #ffffff;
  /* --line is a hairline separator (1.31:1) and stays that way. Anything that
     is a control - a field, a button, a chip, a tick circle - draws its edge
     in --line-strong instead, which clears the 3:1 WCAG 1.4.11 minimum on
     --card (4.00), --card2 (3.67), --row (3.70) and --panel (3.20). */
  --line-strong: #797f90;
  --shadow: 0 1px 2px rgba(17,17,20,.04),0 8px 24px rgba(17,17,20,.05);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: linear-gradient(135deg,#14161b 0%,#171a21 60%,#151920 100%);
  --bg-solid: #1c1f26;
  --panel: #111318;
  --hover: #2a3040;
  --ink-hover: #d8dbe2;
  --hover-ring: rgba(255,255,255,.22);
  --row: #282c35;
  --hatch: repeating-linear-gradient(135deg,#282c35 0 7px,#31363f 7px 14px);
  --red-line: rgba(255,92,120,.35);
  --card: #1e2128;
  --card2: #262a33;
  --text: #f2f3f6;
  --muted: #9aa0ad;
  --line: #343944;
  --ink: #f2f3f6;
  --ink-text: #111114;
  --red: #ff5c78;
  --red-bg: rgba(255,59,92,.16);
  --orange: #ff9a47;
  --orange-bg: rgba(245,130,32,.16);
  --amber: #ffc633;
  --blue: #4da3ff;
  --blue-bg: rgba(26,140,255,.16);
  --green: #2ecc6a;
  --green-bg: rgba(0,179,65,.16);
  --purple: #a86bff;
  --pink-bg: rgba(236,72,220,.14);

  /* Dark theme: the bright hues already clear AA as text on --card and --row
     (green 7.64, orange 7.65, red 5.41, blue 6.14), so the ink tokens simply
     point at them; only purple is lifted, because #a86bff on the pink tint is
     4.04:1. A filled pill keeps the bright hue and takes dark ink instead of
     white, which reads better here than a muddy dark fill. */
  --green-ink: var(--green);
  --orange-ink: var(--orange);
  --red-ink: var(--red);
  --blue-ink: var(--blue);
  --amber-ink: var(--amber); /* 8.91:1 on --row */
  --purple-ink: #bb8dff;  /* 5.43:1 on the dark --pink-bg */
  --green-fill: var(--green);
  --red-fill: var(--red);
  --on-fill: #111114;     /* 6.33:1 on --red-fill, 8.94:1 on --green-fill */
  --line-strong: #727a8a; /* 3.73:1 on --card, 3.24:1 on --row */
  --shadow: 0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}