/* ---------------------------------------------------------------------------
   WAYPOINT OS - THE COLOUR PALETTE. One value per role, defined once.
   ---------------------------------------------------------------------------

   WHY THIS FILE EXISTS. Eight daily surfaces carried 228 distinct hex colours
   between them, 168 of which appeared on exactly one page. Gold was three
   different values depending on where you were standing; navy was five. The
   eight colours that appeared on four or more pages are the real identity, and
   everything else was drift.

   WHY IT IS NOT css/waypoint-os-theme.css. That file is the MOBILE app's
   stylesheet: m-app.html is its only consumer and 63 of its own rules read its
   14 variables. Redefining a name there would repaint phone screens as a side
   effect of a desktop change. This file is loaded only by the desktop pages
   being converted, and it defines names that collide with nothing.

   TWO SYSTEMS, NOT ONE, and the split is deliberate rather than unfinished.
   Six of the eight daily surfaces are dark; two are light. A success green that
   reads on white is too dark on navy, and the navy one is too bright on white,
   so state colours are named per system. The drift being removed is WITHIN each
   system, not between them.

   NAMED FOR ROLE, NOT FOR COLOUR. A token called --wp-light-panel keeps meaning
   the right thing after someone decides panels should be faintly grey; a token
   called --wp-white does not.

   NO RULES IN THIS FILE, ONLY PROPERTIES. A page adopts the palette by mapping
   its own local variable names onto these, which is a colour-only change and
   needs no class on <body> and no markup edit.

   WHAT IS DELIBERATELY ABSENT:
     - The platform console's cream (#fdfbf5, #f1ece0, #f6f2e8, #e3ddce). That is
       an identity shared byte-identically by all three platform pages, not
       drift, and folding it in would flatten the acquisition CRM's raised panels.
     - The scripts page's five channel accents. Each one carries information on
       that page and has no counterpart anywhere else.
     - The five neutral greys (#eeeeee, #555555, #aaaaaa, #888888, #999999).
       They live in inline style attributes and are MATCHED BY SELECTOR -
       [style*="color:#555"] and 61 more - by the layer that repaints
       agent-dashboard, index and roster dark. Tokenising them breaks the
       selector and the element reverts to dark-on-dark.
   --------------------------------------------------------------------------- */

:root {

  /* -- LIGHT SYSTEM --------------------------------------------------------
     The agent-facing surfaces. Ink is navy, ground is grey, panels are white. */

  /* The ground the page sits on. */
  --wp-light-canvas: #f0f2f5;
  /* A card or panel raised off that ground. */
  --wp-light-panel: #ffffff;
  /* A hairline between two things. Visible, never a border you notice. */
  --wp-light-line: #e3e8ef;
  /* The words you are meant to read. */
  --wp-light-ink: #1a2a44;
  /* A label or caption beside them. Quieter, still legible. */
  --wp-light-ink-muted: #6b7688;
  /* It worked. Dark enough to read as text on white. */
  --wp-light-good: #157347;
  /* Look at this before you continue. */
  --wp-light-warn: #8a6512;
  /* It failed, or it will. */
  --wp-light-bad: #b3261e;

  /* -- DARK SYSTEM ---------------------------------------------------------
     The operator console and the instrument pages. Ink is pale, ground is navy.
     Canvas and panel are separate tokens ON PURPOSE: collapsing them would take
     the depth out of the acquisition CRM's raised panels and flatten the scripts
     page's field into its background. */

  /* The deeper ground the page sits on. */
  --wp-dark-canvas: #0f1c30;
  /* The lighter field a panel sits on, one step up from the canvas. */
  --wp-dark-panel: #13243d;
  /* A panel raised above another panel. The third step, used sparingly. */
  --wp-dark-panel-high: #172c49;
  /* A hairline that separates without glowing. */
  --wp-dark-line: rgba(255,255,255,.09);
  /* The words you are meant to read. */
  --wp-dark-ink: #e8edf4;
  /* A label or caption beside them. */
  --wp-dark-ink-muted: #9fb0c6;
  /* Present, and deliberately quiet. Timestamps, counts, chrome. */
  --wp-dark-ink-faint: #6b7a90;
  /* It worked. Brighter than the light system's, to carry on navy. */
  --wp-dark-good: #27ae60;
  /* Look at this before you continue. */
  --wp-dark-warn: #f39c12;
  /* It failed, or it will. */
  --wp-dark-bad: #e74c3c;

  /* -- BRAND, SHARED BY BOTH SYSTEMS --------------------------------------- */

  /* The brand navy. The mark, and ink on light. */
  --wp-brand-navy: #1a2a44;
  /* The brand navy at its darkest. The ground the dark system stands on. */
  --wp-brand-navy-deep: #0f1c30;
  /* Gold as a SURFACE: button fills, bars, the filled half of a meter. Dark
     enough that navy text sits on it legibly. */
  --wp-gold-fill: #b89548;
  /* Gold as WORDS on a dark ground. Lighter than the fill because it has to
     clear contrast as text, which the fill value does not. These two are kept
     apart for that reason and must not be collapsed. */
  --wp-gold-text: #d4af6a;
  /* Neutral information. Never a state, never success or failure. */
  --wp-info: #2980b9;
}