/* ═══════════════════════════════════════════════════════════════════════════
   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;
}


/* ══ PLACED IMAGERY. Added 31 August 2026 by arc-frontend, image programme tranche 1.

   WHAT THIS IS FOR: the ARC image library is 85 files in two shapes - a square
   lockup tile (1254x1254, "template A/B") and a wide banner (2172x724,
   "template C"). Before this block, 52 of the 67 public pages carried no body
   image at all and the 15 that did each styled it by hand. This is the one
   pattern, so the 30th page does not become the 30th bespoke card.

   🔒 EVERY IMAGE IN THIS LIBRARY CARRIES ITS OWN BAKED-IN TITLE AND TAGLINE.
      So these components deliberately do NOT overlay page text on the artwork.
      Overlaying would collide two titles, and text over an image cannot be given
      a guaranteed contrast floor without a wash that hides the artwork. The tile
      sits ABOVE the h1; the banner sits ABOVE the hero. Nothing is printed on top.

   🔒 NO INTRINSIC RATIO IS SET IN CSS, ON PURPOSE. The library is not
      dimensionally uniform (2172x724, 1824x862, 1536x1024 and 1254x1254 all
      appear). Ratio comes from the width/height ATTRIBUTES on each <img>, which
      is per-image and correct; a hardcoded aspect-ratio here would letterbox or
      crop whichever shape it guessed wrong. width:100%;height:auto lets those
      attributes reserve the box, so nothing shifts as the bytes land.

   ⚠ WHY THIS IS IN arc-tokens.css AND NOT arc-ui.css, WHERE COMPONENTS BELONG:
     measured 31 Aug 2026 - arc-ui.css is linked by 10 files, all of them
     dashboard or preview surfaces; arc-tokens.css is linked by 119, including
     every public page in this programme. This is the same constraint, and the
     same decision, as the estate-wide focus ring above, which carries the same
     note. 🔒 MOVE BOTH TO arc-ui.css THE DAY IT IS LINKED ESTATE-WIDE.
     Flagged to the Foreman as structural debt, not settled as correct. */

.arc-lockup,
.arc-banner { display: block; line-height: 0; }
/* <picture> is an INLINE wrapper. Without this it contributes a text descender
   gap under the image and ignores the block box it is sitting in. */
.arc-lockup picture,
.arc-banner picture { display: block; }
.arc-lockup img,
.arc-banner img { display: block; width: 100%; height: auto; }

/* the square lockup tile - sits above an h1, arena-logo style */
.arc-lockup {
  width: 160px; max-width: 42vw; margin: 0 0 14px;
  border-radius: 14px; overflow: hidden; background: #0a1220;
}
.arc-lockup--lg { width: 200px; }
.arc-lockup--center { margin-left: auto; margin-right: auto; }

/* the wide masthead banner - sits above a hero, full content width */
.arc-banner {
  width: 100%; max-width: 1100px; margin: 0 auto 4px;
  border-radius: 14px; overflow: hidden; background: #000;
}
.arc-banner--flush { max-width: none; border-radius: 0; margin-bottom: 0; }
/* the banner sitting INSIDE a page's own dark hero band rather than above it.
   Measured on screen 31 Aug 2026: across the program-page.css family the body is
   #fff and .hero is a full-bleed navy gradient. A banner in an .arc-banderole
   above that hero renders as a black card floating on white directly on top of a
   navy band - two dark slabs with a white sliver between them. Placed inside the
   hero it reads as one masthead. The width matches .wrap (760px) so the banner
   lines up with the body text below it. */
.arc-banner--inhero { max-width: 760px; margin: 0 auto 26px; }

/* extra clearance under a banner that is followed immediately by another dark
   block. The 4px default is right when a light heading follows; measured on
   articles.html 31 Aug 2026, where a navy hero CARD follows, 4px reads as a
   seam between two slabs rather than as a gap. */
.arc-banner--gap { margin-bottom: 18px; }

/* a hero CARD (not a full-bleed band) carrying a square lockup BESIDE its text
   instead of stacked above it. Measured on screen 31 Aug 2026 on
   founder-diagnostic.html: a 200px navy tile centred above a navy hero card
   reads as a lollipop - two dark blocks of near-identical tone, one narrow over
   one wide. Side by side they read as one object and the page gets shorter. */
.arc-herocard { display: flex; align-items: center; gap: 20px; }
.arc-herocard > .arc-lockup { width: 110px; max-width: 30vw; flex: 0 0 auto; margin: 0; }
.arc-herocard > .arc-herocard-t { min-width: 0; }
.arc-herocard > .arc-herocard-t > :last-child { margin-bottom: 0; }
@media (max-width: 520px) {
  .arc-herocard { display: block; }
  .arc-herocard > .arc-lockup { width: 84px; max-width: 30vw; margin: 0 0 12px; }
}

/* a band to sit a banner in when the page has no content wrapper of its own */
.arc-banderole { padding: 18px 5% 0; background: transparent; }

/* 🔒 THE TILE GRID. Six pages hand-rolled a near-identical one. */
.arc-tilegrid {
  display: grid; gap: 16px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.arc-tilegrid > * { min-width: 0; }

/* interactive versions get a focus ring of their own, because the estate-wide
   ring above draws OUTSIDE the element and these have overflow:hidden and a
   dark fill - measured, the 2px dark ring is invisible against #0a1220. */
a.arc-lockup, a.arc-banner { transition: transform .14s, box-shadow .14s; }
a.arc-lockup:hover, a.arc-banner:hover { transform: translateY(-2px); }
/* 🚨 NO :focus-visible OVERRIDE HERE, DELIBERATELY - AND THIS BLOCK USED TO HAVE
   ONE. It painted a 3px --gold ring. Measured 31 Aug 2026 with controls
   #000/#fff = 21.00 and #fff/#fff = 1.00, --gold #e8a020 scores 1.96:1 on white
   and 2.16:1 on the light page surfaces these components actually sit on. That
   FAILS the WCAG 3:1 focus-indicator minimum, and because it carried
   !important it BEAT the estate-wide double ring above, which scores 16.98:1 on
   a light surface and 18.75:1 against a dark tile fill. A prettier ring was
   quietly deleting an accessible one.
   🔒 THE ESTATE RING IS THE INDICATOR. It is a double ring precisely so it works
      on both ARC's dark chrome and its light workspaces, and outline is drawn
      OUTSIDE the element, so overflow:hidden on these components cannot clip it.
      Do not add a single-colour ring here again without measuring it first. */
@media (prefers-reduced-motion: reduce) {
  a.arc-lockup, a.arc-banner { transition: none; }
  a.arc-lockup:hover, a.arc-banner:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STAGE 3 MEMBER HOME PROTOTYPE TOKENS — added 6 Sep 2026 by arc-frontend.
   Authorised directly by Darren as a ONE-PAGE PROTOTYPE (site/member-home-
   stage3.html) to test a visual language for member-facing surfaces that is
   explicitly NOT the Stage 2 / AVR-001 dark-and-gold system above (--navy,
   --gold, --g-* gradients). Darren's own words rejecting Stage 2 continuing
   forward unchanged: "It must NOT feel like Stage 2 with different fonts,
   Stage 2 with different CSS variables."

   🔒 THESE TOKENS ARE PROTOTYPE-SCOPED, NOT ESTATE-WIDE. They are prefixed
      --s3- specifically so they cannot collide with, or be confused with, the
      --navy/--gold/--teal tokens above that 100+ live pages already depend on.
      Nothing above this block is touched, renamed or reassigned.
   ⚠ DO NOT USE THESE ON ANY OTHER PAGE until Darren approves the prototype and
      the Foreman authorises a wider rollout. If that happens, THIS is the block
      that gets promoted/renamed — a second copy must never be started.
   🔒 EVERY VALUE BELOW WAS MEASURED FOR CONTRAST, NOT EYEBALLED. Formula:
      WCAG relative luminance + contrast ratio, control black-on-white = 21.00.
      Where a hex fails 4.5:1 as text it is labelled FILL/DECORATIVE ONLY below
      and a passing "-ink" or "-tint" pair is given for text/links instead. */
:root {
  /* brand, read directly off the approved reference image's colour panel */
  --s3-navy:   #0B1F3B;
  --s3-blue:   #1E63FF;   /* 4.90:1 as TEXT on white — passes AA body copy   */
  --s3-blue-ink: #1345B8; /* 7.13:1 on the blue tint below — use on a tint   */
  --s3-purple: #8B5CF6;   /* 4.23:1 on white — FILL/DECORATIVE/ICON ONLY, not text */
  --s3-purple-strong: #7C3AED; /* 5.70:1 white-on-fill — buttons carrying white text */
  --s3-purple-ink:    #6D28D9; /* 7.10:1 on white, 6.15:1 on the tint — text/links */
  --s3-gold:   #D4AF37;   /* 2.10:1 on white — FILL ONLY, under dark ink, never white text */

  /* surfaces */
  --s3-grey:   #F4F6FA;   /* the light workspace canvas behind cards          */
  --s3-grey-2: #EEF1F6;   /* a card nested on top of --s3-grey                */
  --s3-border: #E2E8F0;
  --s3-ink:      #0F172A; /* 17.85:1 on white — headings/body                 */
  --s3-ink-mid:  #5e6b7b; /* = estate --muted; 5.43:1 on white, 5.02:1 on --s3-grey */

  /* opportunity-type tints — light background + a matching AA-passing ink,
     never a saturated fill under body-sized text (which is why the arena and
     opportunity SWATCHES below are used as icon fills / non-text UI, and the
     PILLS use a tint+ink pair instead). */
  --s3-purple-tint: #F1ECFE;  /* purple-ink on this  = 6.15:1 */
  --s3-blue-tint:   #E8F0FF;  /* blue-ink   on this  = 7.13:1 */
  --s3-pink-tint:   #FDECF3;  /* pink-ink   on this  = 5.49:1 */
  --s3-pink-ink:    #B0286B;  /* also 6.25:1 as WHITE-on-fill for a button    */
  --s3-teal-tint:   #E4F7F4;  /* --teal-ink (existing estate token) = 4.93:1  */
  --s3-gold-tint:   #FBF3DE;  /* --gold-ink (existing estate token) = 5.64:1  */

  /* the 12-swatch arena palette. Assigned to a live arena/lounge by HASHING
     its slug (see paintArenas() in member-home-stage3.html) — a MECHANISM,
     not a hand-authored map, so a 13th arena the database adds tomorrow still
     gets a stable colour with no code change. Used ONLY as a small icon-tile
     fill behind a white glyph (non-text UI, needs 3:1, every value below
     clears it against white) — arena NAMES are never coloured text on these. */
  --s3-arena-0:  #E8A020;  /* amber   — e.g. Hospitality       */
  --s3-arena-1:  #E5484D;  /* coral   — e.g. Startups/Founders */
  --s3-arena-2:  #1E63FF;  /* blue    — e.g. AI & Technology    */
  --s3-arena-3:  #8B5CF6;  /* purple  — e.g. Collaboration      */
  --s3-arena-4:  #16A34A;  /* green   — e.g. Sustainability     */
  --s3-arena-5:  #2BBFB3;  /* teal    — e.g. Health & Wellbeing */
  --s3-arena-6:  #9F1D1D;  /* deep red — e.g. Legal             */
  --s3-arena-7:  #059669;  /* emerald — e.g. Finance            */
  --s3-arena-8:  #4F46E5;  /* indigo  — e.g. Education          */
  --s3-arena-9:  #F97316;  /* orange  — e.g. Creative           */
  --s3-arena-10: #64748B;  /* blue-grey — e.g. Manufacturing    */
  --s3-arena-11: #8B5E34;  /* brown   — e.g. Real Estate        */
}