/* ============================================================================
   GRID SENTRY DESIGN TOKENS
   The one place a colour is decided. Added 2026-08-14.

   WHY THIS FILE EXISTS.
   app.html, index.html and admin.html each carried their own :root block.
   Eleven tokens were byte identical in all three, which meant eleven chances,
   three times over, for someone to change one and miss the others. Three had
   ALREADY drifted apart and nobody had noticed. Defining the agreed ones once
   does not fix the drift that happened; it makes the next one impossible.

   HOW IT IS WIRED.
   Each page links this file at the end of the document, AFTER its own inline
   <style>, so these values win. The old :root blocks are deliberately left in
   place: they are now dead weight rather than a second source of truth, and
   deleting three blocks out of three large files is a bigger change than this
   is worth. Delete them whenever one of those files is open anyway.

   HOUSE RULE. A new colour goes here first and is used through var(). A raw
   hex in a page is a token that has not been named yet.
   ============================================================================ */

:root {

  /* --- surfaces, darkest to lightest ----------------------------------- */
  --bg:            #080A0F;   /* the page itself */
  --bg-2:          #0C0F16;   /* header, footer, any band that sits on --bg */
  --panel:         #111520;   /* cards, tables, anything raised off the page */
  --panel-2:       #141926;   /* a row or cell raised off --panel */

  /* --- lines ------------------------------------------------------------ */
  --line:          #1E2430;   /* default border, and every table rule */
  --line-2:        #2A3140;   /* a border that needs to be seen, not felt */

  /* --- text ------------------------------------------------------------- */
  --white:         #EEF1F6;   /* primary text. Not pure white, deliberately */
  --steel:         #7C93B5;   /* labels, small caps, anything above a value */
  --fog:           #94A0B4;   /* secondary text, and body copy on dark bands */

  /* --fog-2 WAS THE ONE REAL DISAGREEMENT, AND THE MAJORITY WAS WRONG.
     app.html and admin.html used #5D6879; the marketing page used #768295.
     Measured against --bg: 3.51:1 and 5.09:1. WCAG AA wants 4.5:1 for body
     text, so two files failed and the odd one out passed. Resolved UP to the
     accessible value rather than to the popular one. */
  --fog-2:         #768295;   /* tertiary text: timestamps, file names, hints */

  /* --- brand ------------------------------------------------------------ */
  --accent:        #E8324A;   /* the red. Buttons, the mark, anything asking
                                 to be clicked */
  --accent-soft:   rgba(232,50,74,.12);   /* admin had .14. Imperceptible, and
                                             one fewer thing to disagree on */

  /* --- status ----------------------------------------------------------- */
  --good:          #54C79A;   /* money recovered, a run that worked */
  --amber:         #F5A623;   /* a flag that needs a human, not an error */

  /* --- status tints ------------------------------------------------------
     Only app.html defined these, so the other two pages hand rolled the same
     idea in raw rgba every time they needed it. Now they do not have to. */
  --good-soft:     rgba(84,199,154,.10);
  --amber-soft:    rgba(245,166,35,.10);
}

/* ============================================================================
   KEYBOARD FOCUS

   The marketing page and the admin page carried no focus style at all, so a
   keyboard user got Chrome's default: a bright blue double ring on a black and
   red brand. Visible, which is what matters, but plainly not ours.

   THIS RULE IS DELIBERATELY THE LOWEST POSSIBLE SPECIFICITY (0,1,0). Every
   considered per component focus style already in app.html is more specific
   and still wins: .setrow:focus-visible, .setback:focus-visible, the switch
   track, and the input rules that swap the outline for a border colour. This
   only catches what was previously falling through to the browser default.

   :focus-visible, not :focus, so a mouse click never draws a ring. That
   distinction is the whole reason the modern selector exists.
   ============================================================================ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================================
   STILL NOT RESOLVED, ON PURPOSE

   --radius   app 14px · marketing 16px · admin does not define it
              Probably deliberate: a dense application screen and a marketing
              page have different reasons to round a corner, and picking one
              would visibly change every card on the other. If the difference
              is intended it deserves two names, --radius and --radius-lg,
              rather than one name meaning two things. That is a design
              decision, so it stays local to each page until it is made.

   Marketing also holds --accent-fill, --maxw and --ease, and admin holds none
   of them. Those are genuinely page local and do not belong here.
   ============================================================================ */