/* ==========================================================================
   Praxoma — shared design tokens.

   One source of truth for both surfaces: the public site and the product
   prototype at /app/. Linked first on every page, so `praxoma.css` and
   `app/app.css` draw from the same palette, elevation and shape scale and
   the doorway between them stops looking like a seam.

   Two naming conventions are exported deliberately. `--px-*` is used by the
   public site; the bare names (`--teal`, `--line`, …) are the prototype's
   existing vocabulary, kept so a tested application does not need a mass
   rename to share a palette.

   Colour carries meaning, and one meaning only:
     green  — done, settled, nothing outstanding
     blue   — in progress, with someone else, no action needed from you
     amber  — this needs you
     violet — another organisation, a partner boundary
     red    — could not proceed
   ========================================================================== */

:root {
  /* Ink -------------------------------------------------------------- */
  --px-ink: #10212b;
  --px-ink-soft: #46596b;
  --px-muted: #6a7c88;

  /* Ground ----------------------------------------------------------- */
  --px-paper: #fafcfc;
  --px-white: #fff;
  --px-soft: #f2f7f8;
  --px-softer: #f7fafb;
  --px-line: #e3ebed;
  --px-line-strong: #cbd9dd;

  /* Brand ------------------------------------------------------------ */
  --px-teal: #0d6a78;
  --px-teal-deep: #07414c;
  --px-teal-mid: #0a5766;
  --px-teal-pale: #e2f0f2;
  --px-teal-tint: #f0f8f9;

  /* Meaning ---------------------------------------------------------- */
  --px-green: #14713f;
  --px-green-pale: #e3f3e9;
  --px-green-line: #c2e3ce;

  --px-blue: #1b5fbe;
  --px-blue-pale: #e8f0fd;
  --px-blue-line: #ccdff8;

  --px-amber: #8a5a10;
  --px-amber-pale: #fdf2df;
  --px-amber-line: #f0dcb4;

  --px-violet: #574aa6;
  --px-violet-pale: #eeecfa;
  --px-violet-line: #dbd6f2;

  --px-red: #93312f;
  --px-red-pale: #fbeceb;

  /* Shape ------------------------------------------------------------ */
  --px-r-xs: 8px;
  --px-r-sm: 12px;
  --px-r: 16px;
  --px-r-lg: 22px;
  --px-r-xl: 28px;

  /* Elevation — soft and low. Depth comes from light, not from outlines. */
  --px-e1: 0 1px 2px rgba(16, 33, 43, .04), 0 2px 8px -4px rgba(16, 33, 43, .10);
  --px-e2: 0 1px 2px rgba(16, 33, 43, .04), 0 12px 28px -16px rgba(16, 33, 43, .24);
  --px-e3: 0 2px 4px rgba(16, 33, 43, .05), 0 30px 60px -30px rgba(16, 33, 43, .32);

  --px-focus: 0 0 0 3px #fff, 0 0 0 5px var(--px-blue);

  /* ------------------------------------------------------------------
     Prototype vocabulary, mapped onto the same palette.
     ------------------------------------------------------------------ */
  --ink: var(--px-ink);
  --ink-soft: var(--px-ink-soft);
  --muted: var(--px-muted);
  --paper: var(--px-paper);
  --surface: var(--px-white);
  --soft: var(--px-soft);
  --line: var(--px-line);
  --line-strong: var(--px-line-strong);
  --teal: var(--px-teal);
  --teal-deep: var(--px-teal-deep);
  --teal-pale: var(--px-teal-pale);
  --warm: var(--px-amber-pale);

  --tone-positive-ink: var(--px-green);
  --tone-progress-ink: var(--px-teal);
  --tone-pending-ink: var(--px-amber);
  --tone-warning-ink: var(--px-amber);
  --tone-negative-ink: var(--px-red);
  --tone-neutral-ink: var(--px-ink-soft);

  --radius: var(--px-r);
  --radius-lg: var(--px-r-lg);
  --focus: var(--px-focus);
}