/* =====================================================================
   FX Utilities — brand tokens
   =====================================================================

   The single source of truth for colour, radius and type across all
   thirteen modules. Every module's index.html links this file BEFORE its
   own css/styles.css, so a module can still override something locally,
   but the defaults all live here.

   Before this file existed the same palette was declared separately in
   fifteen stylesheets — 28 hardcoded copies of the navy alone — which is
   why two modules had quietly drifted onto a slightly different border
   and background grey. Those are reconciled here to the majority values.

   ---------------------------------------------------------------------
   The direction: "navy holds, red leads"
   ---------------------------------------------------------------------

   The company logo is red and black. The apps were navy, which appears
   nowhere in the logo. Rather than repaint thirteen systems that people
   use every day, navy keeps doing the structural work — headers, tabs,
   headings, table furniture — and the brand red takes over the one job
   it is genuinely best at: marking the action you are meant to take.

   So there are two separate ideas below, and they should not be mixed up:

     --navy          structure. What the interface is made of.
     --action        the primary action. What to press.

   Everything that is "the main button on this screen" or "the tab you
   are on" reads from --action. Everything else stays navy. If the whole
   suite is ever taken fully red-and-black, that is a change to --navy
   in this file, not a change to thirteen stylesheets.

   Two rules that keep this working, and are easy to break by accident:

     1. Red means ACTION, not danger. Destructive buttons keep the deeper
        --danger red and stay TINTED (--danger-bg background, --danger
        text) rather than solid, so "Save" and "Delete" can never be
        mistaken for one another at a glance.

     2. Red is for the ONE primary action in a view. A screen with five
        red buttons has no primary action. Secondary actions use
        .btn-ghost / .btn-secondary, which stay navy.

   ===================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------
     The identity red, measured from
     assets/brand/source/fx-utilities-logo-master.png. #EE2D24 is the
     value the tile icons in assets/tiles/ already use, so it is the
     canonical one; a pixel sample of the logo gives #EE2E24, one digit
     off, from anti-aliasing at the edges.

     ARTWORK ONLY — the logo, the tile icons, illustration. Do not use
     it for button fills or for text. Against white it measures 4.17:1,
     which clears the 3:1 that WCAG asks of a graphic but fails the
     4.5:1 it asks of normal text, in both directions (red text on
     white, and white text on a red button). That is the whole reason
     --action below is a different, darker red rather than an alias. */
  --fx-red: #ee2d24;
  --fx-black: #000000;

  /* ---- Action -----------------------------------------------------
     The role, not the colour — point components at these, not at
     --fx-red. Darkened from the brand red until it passes WCAG AA:
     --action measures 5.60:1 against white and --action-hover 7.39:1,
     so white button text and red-on-white label text are both legible,
     including for the depot staff using these on a phone outdoors.

     It still reads unmistakably as the brand red next to the logo. */
  --action: #c9241c;
  --action-hover: #a81c15;
  --action-contrast: #ffffff;   /* text/icons sitting ON --action */

  /* ---- Structure --------------------------------------------------
     Navy. Kept as the interface's own colour, deliberately, and now
     documented as such rather than being an accident of the first
     system that happened to get built. */
  --navy: #1f3864;
  --navy-dark: #142544;
  --blue-light: #dce6f1;

  /* Some modules (Fleet, Payroll, Engineers Portal) already aliased the
     navy as --brand. Kept so those stylesheets keep working, but new
     code should use --navy for structure or --action for actions —
     "brand" is ambiguous now that the real brand colour is the red. */
  --brand: var(--navy);
  --brand-dark: var(--navy-dark);

  /* ---- Neutrals ---------------------------------------------------
     --border and --bg were #dfe4ea / #f4f6f8 in Fleet and Payroll and
     #e2e5ea / #f6f7f9 everywhere else. Reconciled to the majority; the
     difference is under two per cent and not visible side by side. */
  --ink: #1a1d23;
  --grey: #6b7280;
  --grey-light: #f3f4f6;
  --border: #e2e5ea;
  --bg: #f6f7f9;
  --surface: #ffffff;

  /* ---- Semantic ---------------------------------------------------
     State, not brand. These stay put whatever happens to the direction
     above — green is "this worked" in any palette. Note --danger is a
     deeper, less saturated red than --fx-red precisely so the two do
     not read as the same thing. */
  --green: #1e7e34;
  --green-bg: #e6f4ea;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --amber: #8a6100;
  --amber-bg: #fff4d6;

  /* A distinct orange, deliberately not --amber above (used elsewhere for
     "pending"/warning badges) — Interim Reinstatement shouldn't read as a
     warning about the row itself. These colours travel with a status that
     started life in Engineers Portal, which is why five modules carried an
     identical copy of this pair before they were collected here. */
  --orange: #b25e09;
  --orange-bg: #ffe9d1;

  /* Older name for --danger, still used by .btn-danger and .error-text in
     most modules. Deliberately the literal value rather than var(--danger):
     Engineers Portal declares `--danger: var(--red)` in its own :root, so
     aliasing this one back to --danger would make the pair reference each
     other and CSS would throw both away as a cycle, taking every danger
     colour in that module with it. */
  --red: #b3261e;
  --red-bg: #fbe9e7;

  /* ---- Shape and type --------------------------------------------- */
  --radius: 8px;
  --font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* ---------------------------------------------------------------------
   Status notes
   ---------------------------------------------------------------------
   Three states, because not everything worth reading is an error. A
   warning ("could not check this") and a confirmation ("imported 4,763
   rows") both need to stay on screen and be noticed, and in red both would
   read as "this failed". Shared rather than per-module: .ok-text was
   written for Access Control first, and the next module to use it got no
   colour at all.

   Both measured on white: orange 4.67:1, green 6.55:1 — AA for body text.
   -------------------------------------------------------------------- */
.warn-text { color: var(--orange); font-size: 0.92em; }
.ok-text   { color: #1a6b38;       font-size: 0.92em; }