/* Design tokens — see docs/design-system.md. Re-skin by editing this file only.
   Nothing outside this file may name a colour, a size or a radius. */
:root {
  color-scheme: light;

  /* The shell - app bar and rail - is chrome: one shade lighter than the plane the cards sit on, divided
     from it by a hairline rather than by a block of colour. It has its own ink so a re-skin cannot leak
     page ink into the rail. */
  --shell: #ffffff;
  --shell-2: #eef1f6;
  --shell-ink: #0f1720;
  --shell-ink-2: #566472;
  --shell-line: #e2e7ee;

  --page: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --ink: #0f1720;
  --ink-2: #4a5765;
  --ink-3: #7b8896;
  --line: #e2e7ee;
  --line-2: #c8d1dc;

  --accent: #0b6bcb;
  --accent-ink: #ffffff;
  --accent-wash: #e8f1fb;

  /* Present but not in focus: history bars, de-emphasised marks. Data never wears a chrome token. */
  --accent-soft: #a9cbee;
  --mark-muted: #a9cbee;

  /* Duration ramp: one hue family, light to dark, for age and delay only — never for a person. */
  --age-1: #fdf3e0;
  --age-2: #f6d99b;
  --age-3: #e8a93f;
  --age-4: #c9782a;
  --age-5: #9c4f22;
  --age-ink-lo: #5c3d12;
  --age-ink-hi: #ffffff;

  /* Stage colours for the flow strip: who owns the time, not whether it is good. */
  --stage-approval: #7c6bd6;
  --stage-dev: #0b6bcb;
  --stage-testing: #14907a;
  --stage-waiting: #b9c2cf;

  --good: #17795e;
  --warn: #b7791f;
  --serious: #c9782a;
  --critical: #c0392b;

  /* Categorical series, assigned in fixed order and never cycled (docs/design-system.md, Charts). */
  --series-1: #0b6bcb;
  --series-2: #d9641e;
  --series-3: #14907a;
  --series-4: #b7791f;
  --series-5: #b5518a;
  --series-6: #4a7a2c;
  --series-7: #6b5bc4;
  --series-8: #b33a3a;

  --font: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --t-xs: 12px; --lh-xs: 16px;
  --t-sm: 13px; --lh-sm: 18px;
  --t-md: 15px; --lh-md: 22px;
  --t-lg: 17px; --lh-lg: 24px;
  --t-xl: 22px; --lh-xl: 28px;
  --t-kpi: 34px; --lh-kpi: 38px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-sm: 5px; --r-md: 10px;
  --rail: 232px;
  --rail-min: 60px;        /* the rail collapsed to icons; see :root[data-rail="min"] */
  --bar: 52px;             /* app bar; the rail and sticky table headers start below it */
  --content-max: 1700px;   /* data fills the screen; prose caps itself at --prose-max */
  --prose-max: 72ch;
  --gutter: 24px;

  /* Exactly one elevation, and only where something is interactive. */
  --lift: 0 1px 2px rgba(15, 23, 32, .06), 0 4px 12px rgba(15, 23, 32, .05);

  /* Behind a modal dialog: dims the page without hiding which row the dialog is about. */
  --scrim: rgba(15, 23, 32, .42);
  --dialog-w: 520px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shell: #141a21;
    --shell-2: #1e2732;
    --shell-ink: #e8edf3;
    --shell-ink-2: #97a6b8;
    --shell-line: #242e3a;
    --page: #10151b;
    --surface: #171e26;
    --surface-2: #1e2732;
    --ink: #e8edf3;
    --ink-2: #a3b1c2;
    --ink-3: #74828f;
    --line: #242e3a;
    --line-2: #32404f;
    --accent: #4d9ae8;
    --accent-ink: #0a1420;
    --accent-wash: #16273a;
    --accent-soft: #35567c;
    --mark-muted: #35567c;
    --age-1: #2c2418; --age-2: #4a3a1e; --age-3: #7d5a22; --age-4: #a9702b; --age-5: #cf8a36;
    --age-ink-lo: #eec489; --age-ink-hi: #1a1208;
    --stage-waiting: #3d4855;
    --good: #35b58f;
    --warn: #d9a441;
    --serious: #d98c4a;
    --critical: #e06a5d;
    --series-1: #4d9ae8; --series-2: #e4834a; --series-3: #35b58f; --series-4: #d9a441;
    --series-5: #d47aae; --series-6: #7aa85a; --series-7: #9287e0; --series-8: #e06a5d;
    --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
    --scrim: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --shell: #141a21;
  --shell-2: #1e2732;
  --shell-ink: #e8edf3;
  --shell-ink-2: #97a6b8;
  --shell-line: #242e3a;
  --page: #10151b;
  --surface: #171e26;
  --surface-2: #1e2732;
  --ink: #e8edf3;
  --ink-2: #a3b1c2;
  --ink-3: #74828f;
  --line: #242e3a;
  --line-2: #32404f;
  --accent: #4d9ae8;
  --accent-ink: #0a1420;
  --accent-wash: #16273a;
  --accent-soft: #35567c;
  --mark-muted: #35567c;
  --age-1: #2c2418; --age-2: #4a3a1e; --age-3: #7d5a22; --age-4: #a9702b; --age-5: #cf8a36;
  --age-ink-lo: #eec489; --age-ink-hi: #1a1208;
  --stage-waiting: #3d4855;
  --good: #35b58f;
  --warn: #d9a441;
  --serious: #d98c4a;
  --critical: #e06a5d;
  --series-1: #4d9ae8; --series-2: #e4834a; --series-3: #35b58f; --series-4: #d9a441;
  --series-5: #d47aae; --series-6: #7aa85a; --series-7: #9287e0; --series-8: #e06a5d;
  --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
  --scrim: rgba(0, 0, 0, .6);
}

/* Collapsing the rail is one token: the bar's brand zone, the rail and the content plane all follow it. */
:root[data-rail="min"] { --rail: var(--rail-min); }

@media (max-width: 767px) {
  :root { --gutter: 16px; }
}