/* KXCO App Shell: semantic and layout tokens (Asana 4.5).
   These sit ON TOP of the brand tokens in kxco-tokens.css, which is vendored unchanged. Nothing here edits or extends a brand token.
   Rules: colour is defined here and only here (shell.css uses var() names and no colour literals); every ground and text pairing is checked by tests/shell
   for WCAG 2.2 AA contrast; the status accents below are the one addition that is not in the Web Brand Kit, they come from the approved storyboard and are
   PROPOSED for Mike's design approval (decision SX-02 in docs/design/app-shell-spec.md). */
:root {
  /* Grounds and text. Derived from the kit with color-mix so no new brand colour is introduced. */
  --kxs-ground: var(--kx-navy);
  --kxs-ground-raised: color-mix(in srgb, var(--kx-cream) 7%, var(--kx-navy));
  --kxs-ground-active: color-mix(in srgb, var(--kx-cream) 13%, var(--kx-navy));
  --kxs-line-on-dark: color-mix(in srgb, var(--kx-cream) 22%, var(--kx-navy));
  --kxs-line-strong-on-dark: color-mix(in srgb, var(--kx-cream) 55%, var(--kx-navy));
  --kxs-text-on-dark: var(--kx-cream);
  --kxs-text-muted-on-dark: color-mix(in srgb, var(--kx-cream) 76%, var(--kx-navy));
  --kxs-accent-on-dark: var(--kx-gold-light);
  --kxs-paper: var(--kx-cream);
  --kxs-paper-sunk: color-mix(in srgb, var(--kx-ochre) 45%, var(--kx-cream));
  --kxs-line-on-paper: color-mix(in srgb, var(--kx-ink) 24%, var(--kx-cream));
  --kxs-line-strong-on-paper: color-mix(in srgb, var(--kx-ink) 62%, var(--kx-cream));
  --kxs-text-on-paper: var(--kx-ink);
  --kxs-text-muted-on-paper: color-mix(in srgb, var(--kx-ink) 72%, var(--kx-cream));
  --kxs-accent-on-paper: var(--kx-gold-text);

  /* Actions. Gold fill with ink text (the storyboard's bronze with cream text does not reach 4.5:1). */
  --kxs-action-fill: var(--kx-gold);
  --kxs-action-fill-hover: var(--kx-gold-light);
  --kxs-action-text: var(--kx-ink);

  /* Focus. Two rings so it shows on both grounds. */
  --kxs-focus-on-dark: var(--kx-gold-light);
  --kxs-focus-on-paper: var(--kx-ink);

  /* Status accents (PROPOSED, SX-02). Light-filled chips with dark text, as in the storyboard, so one chip style reads the same on navy and on cream. */
  --kxs-info-bg: #D4E1EE;
  --kxs-info-fg: #14324F;
  --kxs-success-bg: #D7E7D4;
  --kxs-success-fg: #17452D;
  --kxs-warning-bg: #FFEBB3;
  --kxs-warning-fg: #5A3F00;
  --kxs-danger-bg: #F3D5D2;
  --kxs-danger-fg: #6B1D17;
  --kxs-success-dot: #2DA56F;
  --kxs-warning-dot: #ECC587;
  --kxs-danger-dot: #E0766E;
  --kxs-info-dot: #8DB4DB;
  /* Banners on the navy ground: a dark tint with a light border and cream text. */
  --kxs-danger-panel: #341E22;
  --kxs-danger-panel-line: #E0766E;
  --kxs-warning-panel: #2E2614;
  --kxs-warning-panel-line: #ECC587;
  --kxs-info-panel: #12253D;
  --kxs-info-panel-line: #8DB4DB;

  /* Overlays. */
  --kxs-scrim: color-mix(in srgb, var(--kx-ink) 72%, transparent);
  --kxs-shadow: color-mix(in srgb, var(--kx-ink) 55%, transparent);

  /* Spacing, a 4 px base. */
  --kxs-space-1: 0.25rem;
  --kxs-space-2: 0.5rem;
  --kxs-space-3: 0.75rem;
  --kxs-space-4: 1rem;
  --kxs-space-5: 1.5rem;
  --kxs-space-6: 2rem;
  --kxs-space-7: 3rem;
  --kxs-radius-s: 6px;
  --kxs-radius-m: 10px;
  --kxs-radius-pill: 999px;

  /* Layout. */
  --kxs-topbar-h: 4.5rem;
  --kxs-topbar-actual: var(--kxs-topbar-h); /* the behaviour script sets the measured height of the top bar on the root element when the bar wraps */
  --kxs-nav-w: 15rem;
  --kxs-nav-w-collapsed: 4.5rem;
  --kxs-content-max: 112rem;
  --kxs-target-min: 2.75rem;
  --kxs-focus-width: 3px;
}