/* KXCO App Shell: the light theme (Asana 6.3 release work, shell 0.2.0).
   The default appearance is dark (navy ground). A person may choose the light appearance in their product's settings; the choice is stored in the cookie kx-theme, which
   shell-boot.js applies before first paint as data-theme="light" on the root element, and which a server may also write into the page. Load this file AFTER shell-tokens.css.
   It overrides only the ground family: the names ending in "on-dark" are "the text, line and accent that sit on the page ground", so in this theme they hold ink on cream.
   Rules as for shell-tokens.css: colour is defined here and nowhere else, no new brand colour is introduced (the cream, ochre, ink and gold-text are the kit's), and every
   pairing is checked for WCAG 2.2 AA contrast by tests/shell (tools/shell/color.mjs). The light theme is the soft cream of the kit, not gold. */
:root[data-theme="light"] {
  color-scheme: light;
  --kxs-ground: var(--kx-cream);
  --kxs-ground-raised: color-mix(in srgb, #FFFFFF 62%, var(--kx-cream));
  --kxs-ground-active: color-mix(in srgb, var(--kx-ochre) 70%, var(--kx-cream));
  --kxs-line-on-dark: color-mix(in srgb, var(--kx-ink) 20%, var(--kx-cream));
  --kxs-line-strong-on-dark: color-mix(in srgb, var(--kx-ink) 62%, var(--kx-cream));
  --kxs-text-on-dark: var(--kx-ink);
  --kxs-text-muted-on-dark: color-mix(in srgb, var(--kx-ink) 76%, var(--kx-cream));
  --kxs-accent-on-dark: var(--kx-gold-text);
  --kxs-focus-on-dark: var(--kx-ink);

  /* Cards sit lighter than the cream ground. */
  --kxs-paper: color-mix(in srgb, #FFFFFF 62%, var(--kx-cream));
  --kxs-paper-sunk: color-mix(in srgb, var(--kx-ochre) 45%, var(--kx-cream));

  /* Banners on the cream ground: a light tint with a dark border and ink text. */
  --kxs-danger-panel: #F8E1DE;
  --kxs-danger-panel-line: #8E2F25;
  --kxs-warning-panel: #FFF0C7;
  --kxs-warning-panel-line: #7A5200;
  --kxs-info-panel: #DDE8F3;
  --kxs-info-panel-line: #1F4A7E;
  --kxs-success-dot: #2F6B3A;
  --kxs-warning-dot: #8A5A00;
  --kxs-danger-dot: #9B2C2C;
  --kxs-info-dot: #2E5E9A;
  --kxs-scrim: color-mix(in srgb, var(--kx-ink) 55%, transparent);
}
:root:not([data-theme="light"]) { color-scheme: dark; }