/* ═══════════════════════════════════════════════════════════════════════════
   arc-tokens.css · THE ONE PLACE ARC'S COLOURS ARE DEFINED
   Created 29 August 2026.

   🚨 WHY THIS FILE EXISTS. Measured across all 131 pages in site/ on 29 Aug 2026:
      120 pages carried their own inline <style>, 109 declared their own :root
      block, and between them they defined 103 distinct hex values. The same token
      NAME carried different colours on different pages:

        --muted   9 different values   #6b7a8d x30 · #5a6a7a x28 · #667085 x12 …
        --bg      7 different values   #f4f1ea x19 · #f5f3ef x18 · #f7f9fb x12 …
        --gold    5 different values   #e8a020 x60 · #f0a500 x11 · #b8922a x3 …
        --navy    4 different values   #1a2744 x32 · #1a2340 x24 · #0e1a2b x20 …

      So ARC had four navies and five golds, and which one a person saw depended on
      which page they landed on. That is not a theme; it is 109 themes.

      🔒 The measurement was not noise: --warn and --fail already had exactly one
         value each, and they still do. The inconsistency was real and specific.

   ⚠ THE VALUES BELOW ARE THE ONES ALREADY IN THE MAJORITY, chosen on Darren's
     ruling of 29 Aug so the fewest pages change visibly. They are a starting
     point, not a brand decision made by software — changing any of them now means
     editing ONE line here, which is the entire point of the file.

   🔒 HOW PAGES USE IT: link this BEFORE the page's own <style>, and delete the
      page's local declarations of these tokens so it inherits. A page may still
      define tokens this file does not (an arena accent, a one-off surface) — that
      is deliberate. This file owns the shared vocabulary, not every colour.

   ⚠ DO NOT ADD A BUILD STEP FOR THIS. site/ has no bundler and no package.json,
     and custom properties need none. Adopting a pipeline is Darren's ruling alone.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── brand ──────────────────────────────────────────────────────────────── */
  --navy:   #1a2744;   /* the primary. 32 pages already used exactly this        */
  --navy2:  #1e3050;   /* the lighter navy, for gradients and hovers            */
  --gold:   #e8a020;   /* the accent. 60 pages already used exactly this        */
  --teal:   #2bbfb3;   /* the secondary accent                                  */

  /* ── surfaces ───────────────────────────────────────────────────────────── */
  --bg:      #f4f1ea;  /* page background                                       */
  --surface: #ffffff;  /* cards and panels                                      */
  --border:  #e2d9c8;  /* hairlines and card edges                              */

  /* ── type ───────────────────────────────────────────────────────────────── */
  --text:     #1a2030; /* body copy                                            */
  --text-mid: #4a4a6a; /* secondary copy                                       */
  /* 🚨 DARKENED 30 Aug 2026 from #6b7a8d, which measured 4.38:1 on white and
     therefore FAILED the 4.5 floor at the 11-13px this token is overwhelmingly
     used at. Measured across the 75 pages that actually resolve it: 566 text
     elements, of which 4 passed before and 547 pass now. ZERO elements passed
     before and fail after. An anti-control (#999999) scored 9, so the
     instrument responds to the colour and the numbers mean something.
     ⚠ ONE PAGE GETS WORSE: 9 elements on wheel-of-wealth.html sit on a dark
       background and were ALREADY failing at 4.09:1; they go to 3.30. That page
       needs its own on-dark ink either way - it is a pre-existing fault made
       more visible, not a fault introduced here.
     ⚠ 7 pages use var(--muted) but never load this file, so they still paint
       the old shade from the fallback. Separate job.
     🔒 Reverting is this one line. */
  --muted:    #5e6b7b; /* captions, hints, timestamps                          */

  /* ── state ──────────────────────────────────────────────────────────────── */
  /* 🔒 --warn and --fail were ALREADY consistent estate-wide before this file
     existed. They are recorded here unchanged, so that consistency is now
     protected rather than accidental. */
  --green: #059669;
  --warn:  #c05a0e;
  --fail:  #b3261e;

  /* ── ink variants: the same hues, dark enough to be READ ──────────────── */
  /* Added 30 Aug 2026 by arc-frontend while shipping groups.html.
     MEASURED against --bg (#f4f1ea), not eyeballed:
       --green (#059669) as body-copy text scores 3.34:1  — FAILS WCAG AA (4.5)
       --gold  (#e8a020) as body-copy text scores 1.96:1  — FAILS badly
     🚨 CORRECTED 30 Aug 2026. This block previously attributed 2.59:1 to
        "--gold (#b8922a)". #b8922a is a HISTORICAL gold that this file retired;
        the token on line 39 is #e8a020, which is WORSE (1.96:1, not 2.59:1).
        The old number was quotable and wrong. Measured, control #000 on #fff
        = 21.00 and #fff on #fff = 1.00.
     🚨 AND THIS BLOCK USED TO SAY "Both are fine as a FILL behind white text".
        THAT WAS FALSE FOR BOTH, and measurably so. As a FILL under WHITE text:
          --green #059669 + #fff = 3.77:1 — FAILS AA body (4.5). Large text
            (≥24px, or ≥19px bold) and non-text UI only. NOT for body copy.
          --gold  #e8a020 + #fff = 2.22:1 — FAILS AA at EVERY size, including
            large text and UI (3.0). 🔒 NEVER put white text on --gold.
        On a --gold fill use a DARK ink instead: --navy #1a2744 = 6.69:1 or
        --text #1a2030 = 7.33:1. Both pass AA at any size.
     🚨 --teal HAS THE SAME FAULT AND IT IS THE WORST PLACED. Added 31 Aug 2026.
        --teal #2bbfb3 as TEXT scores 2.28:1 on white and 2.02:1 on --bg — FAILS AA
        at every size. It was being used for SIGN-IN FURNITURE ("Sign in",
        "Forgot password?", "Back to ARCverse", "Dashboard") across 20+ pages,
        which is the worst place in the estate for unreadable text.
        ⚠ AND AS A FILL, --teal IS ONLY SAFE UNDER DARK TEXT, NOT WHITE:
          #fff on --teal = 2.28:1 — FAILS AA at EVERY size, including UI (3.0).
          --navy #1a2744 on --teal = 6.49:1 — passes at any size. Use this.
        🔒 --teal ITSELF IS UNCHANGED (Foreman ruling 31 Aug): it is correct as a
           fill and recolouring it would ripple through every page that fills with
           it. What changes is what you put ON it, and what you use for TEXT.
     These three are for TEXT and LINKS on a light surface only.
       --green-ink #047857 → 4.86:1   --gold-ink #7a5c0c → 5.53:1
       --teal-ink  #0f766e → 4.85:1 on --bg, 5.47:1 on white (--surface)
     🔒 If you are colouring a link or a word, reach for the -ink pair. */
  --green-ink: #047857;
  --gold-ink:  #7a5c0c;
  --teal-ink:  #0f766e;

  /* ── on-dark ink: for muted text on a DARK surface ────────────────── */
  /* Added 31 Aug 2026 by arc-frontend, Foreman ruling.
     🚨 --muted IS A LIGHT-SURFACE TOKEN AND INVERTS BADLY. On a dark page it
        gets DARKER as the light-surface contrast improves, so the 30 Aug darkening
        of --muted (#6b7a8d → #5e6b7b) made dark pages WORSE, not better:
          on wheel-of-wealth's --ink #0a1826, old #6b7a8d = 4.09:1 (already FAILING)
          and new #5e6b7b = 3.30:1. Both fail the 4.5 floor. Re-measured 31 Aug,
          controls #000/#fff = 21.00 and #fff/#fff = 1.00.
     🔒 SO A DARK SURFACE MUST NOT REUSE --muted. Use this instead:
          --muted-on-dark #8ba6bd → 7.07:1 on --ink #0a1826
                                  → 5.85:1 on --navy #1a2744
                                  → 5.20:1 on --navy2 #1e3050
        All three pass AA at any size, so it is safe across the estate's dark
        surfaces rather than tuned to one page. */
  --muted-on-dark: #8ba6bd;

  /* ── focus ring ────────────────────────────────────── */
  --focus-ring: #0a1826;   /* dark half of the ring  */
  --focus-halo: #ffffff;   /* light half of the ring */
}

/* ══ KEYBOARD FOCUS, ESTATE-WIDE. Added 31 Aug 2026 by arc-frontend, Foreman ruling.
   Measured 29 Aug: 77 pages styled :hover, only 7 used :focus-visible. ARC was built
   for a mouse, and a keyboard user could not see where they were.

   WHY A DOUBLE RING, and not the single --green-ink ring groups.html shipped with:
   ARC has DARK chrome and LIGHT workspaces on the same page, so one colour cannot
   work everywhere — a dark ring vanishes on the navy nav. This paints BOTH, so one
   half always contrasts. Measured, controls #000/#fff = 21.00 and #fff/#fff = 1.00:
     dark ring #0a1826 on white  = 17.93:1   on --bg cream  = 15.89:1
     white halo #ffffff on navy  = 14.81:1   on --ink       = 17.93:1
   WCAG 2.2 asks 3:1 against adjacent colour; every leg clears it several times over.

   ⚠ WHY !important, WHICH IS OTHERWISE BANNED HERE: 20+ pages carry
     `outline:none` on inputs and buttons, and a page's own <style> loads AFTER this
     file, so without it those pages silently keep no focus indicator at all. The
     override is scoped to :focus-visible only — it cannot affect the resting state.

   ⚠ :focus-visible, NOT :focus — a mouse click draws nothing, Tab draws the ring.
   🔒 THIS BELONGS IN arc-ui.css, which owns components. It is here because
      arc-ui.css is linked by 2 pages and this file by 112, so this is the only
      estate-wide reach available without a build step. (The 112 was re-counted
      31 Aug 2026 at commit e66eb56 with every lane finished; an earlier reading
      of 100 was taken while other lanes were still editing site/ and was a
      snapshot, not a census. Control: a nonsense filename matched 0 files.)
      Move it when that changes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--focus-ring, #0a1826) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--focus-halo, #ffffff) !important;
}