/* =================================================================================================
   StrataSFR — shared light/dark token set.

   WHY THIS IS ONE FILE AND NOT 39 COPIES
   command.html, deal-admin.html and library.html each carry their own copy of a theme block. That
   was fine at three pages and is not fine at forty-two: the next palette tweak would have to land
   in every one of them, and the ones it missed would drift silently — no error, just a page that
   looks wrong on a client's screen. Every other page now loads this file instead.

   HOW IT WINS WITHOUT CARING ABOUT LOAD ORDER
   The pages this theme is bolted onto declare their dark palette in a bare `:root{}` inside a long
   inline <style>. This file is linked BEFORE that <style> on purpose:

     - The bare `:root` block below introduces ONLY tokens that no page declares. A page's own dark
       values therefore still win on source order, and dark rendering is unchanged.
     - Every light override is written at `:root[data-theme="light"]` or `:root:not([data-theme])`
       — specificity (0,1,1) — which beats a page's bare `:root` (0,0,1) no matter where the two
       sit relative to each other. This is the failure this file is built to avoid: a token that
       quietly loses to a later hardcoded rule and shows up as nothing at all.

   THREE STATES, NOT TWO
     no attribute + OS dark   -> the page's own values (dark)
     no attribute + OS light  -> the @media block
     [data-theme="light"]     -> the explicit block
     [data-theme="dark"]      -> `:not([data-theme])` stops matching, so the page's own dark values
                                 come back. No restore block needed; the selector does the work.

   THE LIGHT VALUES ARE PICKED, NOT INVERTED
   Negating a dark palette gives you muddy borders and grey-on-white text. --muted was #9fb0bf,
   which is 2.1:1 on a white card — legible on black, unreadable on paper. The greys below are
   re-picked against the light ground: 6.8:1 for secondary text, 5.2:1 for tertiary. The gold moves
   from #c9a25b (2.4:1 on white — brand colour, but not a text colour) to #8a5d18, which is the
   same hue family at 5.7:1. Shadow does the work borders did on dark, where a card was legible
   because it was lighter than the page; on light it has to be darker at its edge instead.
   ============================================================================================== */

/* There is deliberately no bare `:root{}` block here. Every token below exists ONLY in the light
   blocks, and each call site in the pages spells its own dark value as the var() fallback —
   `var(--input-bg,#0f1822)`. That makes the dark rendering byte-identical to what shipped: if this
   file fails to load, or a page is missed, nothing changes rather than something silently going
   grey. It also lets the same token name carry four different dark values across the four palette
   families on this site without needing four token names. */

/* ---- Follow the operating system until someone picks a side with the toggle. ----------------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    /* grounds — three names for "page background" across the four palette families on this site */
    --bg:#f4f6f9; --ink:#f4f6f9; --ink2:#eef2f7;
    /* surfaces */
    --card:#ffffff; --panel:#ffffff;
    --panel-2:#eaeff5; --panel2:#eef2f7; --card2:#eef2f7; --raised:#eef2f7;
    /* rules */
    --line:#cfd8e3; --line-soft:#e3e9f0; --line2:#b9c5d4; --line-2:#b9c5d4;
    /* type */
    --cream:#101823; --text:#101823;
    --muted:#48566b; --text-dim:#48566b;
    --dim:#5a687e; --text-faint:#5a687e;
    /* accents */
    --gold:#8a5d18; --gold2:#6f4a12; --gold-dim:#7f5f22;
    --gold-soft:rgba(138,93,24,.12);
    --goldgrad:linear-gradient(135deg,#8a5d18,#6b4610);
    --on-gold:#ffffff;
    --green:#1f7a4d; --green-soft:rgba(31,122,77,.12); --ok:#1f7a4d; --ok-soft:rgba(31,122,77,.12);
    --rust:#9a5a12; --warn:#9a5a12; --warn-soft:rgba(154,90,18,.12);
    --red:#b3261e; --blue:#1d5c93;
    /* introduced tokens */
    --input-bg:#ffffff;
    --brand-word:#101823; --brand-mark:#8a5d18;
    --footer-muted:#48566b; --footer-gold:#8a5d18; --footer-sep:#6f7d8f;
    --hero-grad:linear-gradient(160deg,#ffffff,#e8eef7);
    --hero-line:rgba(138,93,24,.35);
    --fc-grad:linear-gradient(135deg,#ffffff,#e9f3ec);
    --stat-grad:linear-gradient(150deg,#ffffff,#eef2f8);
    --sig-blue:#1d5c93; --sig-amber:#8a5510; --sig-purple:#5b3fd0;
    --sig-red:#a8322a; --sig-green:#1f7a4d; --sig-gold:#7a5316;
    /* translucent chrome bars (admin's action bar, the distressed desk's top bar and cart) were
       hardcoded dark rgba with token-coloured text inside — dark-on-dark once the tokens flipped */
    --scrim:rgba(255,255,255,.88); --scrim-strong:rgba(255,255,255,.96);
    /* recessed stat tiles and chips were translucent DARK fills sitting inside a card. On white they
       have to invert to a faint dark wash, or the label inside them keeps its dark-ground colour. */
    --tile-bg:rgba(16,24,35,.045); --chip-bg:rgba(16,24,35,.07);
    --section-grad:linear-gradient(180deg,#eef2f8,#f7f9fc);
    --goldtext-grad:linear-gradient(120deg,#8a5d18,#6b4610);
    --header-grad:linear-gradient(160deg,#ffffff,#eef3fa);
    --shadow:0 1px 2px rgba(16,24,35,.06),0 1px 3px rgba(16,24,35,.06);
    --shadow-lg:0 2px 4px rgba(16,24,35,.05),0 8px 24px rgba(16,24,35,.08);
  }
}

/* ---- Explicit choice. Same values; wins over the media block because :not() stops matching. --- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f9; --ink:#f4f6f9; --ink2:#eef2f7;
  --card:#ffffff; --panel:#ffffff;
  --panel-2:#eaeff5; --panel2:#eef2f7; --card2:#eef2f7; --raised:#eef2f7;
  --line:#cfd8e3; --line-soft:#e3e9f0; --line2:#b9c5d4; --line-2:#b9c5d4;
  --cream:#101823; --text:#101823;
  --muted:#48566b; --text-dim:#48566b;
  --dim:#5a687e; --text-faint:#5a687e;
  --gold:#8a5d18; --gold2:#6f4a12; --gold-dim:#7f5f22;
  --gold-soft:rgba(138,93,24,.12);
  --goldgrad:linear-gradient(135deg,#8a5d18,#6b4610);
  --on-gold:#ffffff;
  --green:#1f7a4d; --green-soft:rgba(31,122,77,.12); --ok:#1f7a4d; --ok-soft:rgba(31,122,77,.12);
  --rust:#9a5a12; --warn:#9a5a12; --warn-soft:rgba(154,90,18,.12);
  --red:#b3261e; --blue:#1d5c93;
  --input-bg:#ffffff;
  --brand-word:#101823; --brand-mark:#8a5d18;
  --footer-muted:#48566b; --footer-gold:#8a5d18; --footer-sep:#6f7d8f;
  --hero-grad:linear-gradient(160deg,#ffffff,#e8eef7);
  --hero-line:rgba(138,93,24,.35);
  --fc-grad:linear-gradient(135deg,#ffffff,#e9f3ec);
  --stat-grad:linear-gradient(150deg,#ffffff,#eef2f8);
  --sig-blue:#1d5c93; --sig-amber:#8a5510; --sig-purple:#5b3fd0;
  --sig-red:#a8322a; --sig-green:#1f7a4d; --sig-gold:#7a5316;
    /* translucent chrome bars (admin's action bar, the distressed desk's top bar and cart) were
       hardcoded dark rgba with token-coloured text inside — dark-on-dark once the tokens flipped */
    --scrim:rgba(255,255,255,.88); --scrim-strong:rgba(255,255,255,.96);
    /* recessed stat tiles and chips were translucent DARK fills sitting inside a card. On white they
       have to invert to a faint dark wash, or the label inside them keeps its dark-ground colour. */
    --tile-bg:rgba(16,24,35,.045); --chip-bg:rgba(16,24,35,.07);
    --section-grad:linear-gradient(180deg,#eef2f8,#f7f9fc);
    --goldtext-grad:linear-gradient(120deg,#8a5d18,#6b4610);
  --header-grad:linear-gradient(160deg,#ffffff,#eef3fa);
  --shadow:0 1px 2px rgba(16,24,35,.06),0 1px 3px rgba(16,24,35,.06);
  --shadow-lg:0 2px 4px rgba(16,24,35,.05),0 8px 24px rgba(16,24,35,.08);
}

/* =================================================================================================
   Things a token swap cannot reach on its own.
   ============================================================================================== */

/* The wordmark. brand.js injects it into every .brandmark anchor, and buyer.html / seller.html
   carry the same artwork inline — in both cases as `<g fill="#f4efe6">`, cream, which is the exact
   casualty the light ground creates: a logo that simply is not there. A presentation attribute
   loses to any CSS rule, so one selector catches every copy of it, injected or inline, without
   brand.js needing to know a theme exists. The ring around SFR is part of the mark and is recoloured
   with it, never dropped. */
svg g[fill="#f4efe6"]{fill:var(--brand-word,#f4efe6)}
svg g[fill="#c9a25b"]{fill:var(--brand-mark,#c9a25b)}

/* strata-logo.png is black artwork on transparent, so dark inverts it and light leaves it alone. */
.brandlogo,.topbar .brand img,a.brand img{filter:invert(1) brightness(1.12)}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .brandlogo,
  :root:not([data-theme]) .topbar .brand img,
  :root:not([data-theme]) a.brand img{filter:none}
}
:root[data-theme="light"] .brandlogo,
:root[data-theme="light"] .topbar .brand img,
:root[data-theme="light"] a.brand img{filter:none}


/* agreements.html's header mark is a hosted PNG in LIGHT artwork on transparent — the opposite of
   strata-logo.png. Its own @media print block already inverts it for paper; the light theme is the
   same problem. `img.logo` and not `.logo`: on marketplace .logo is a text lockup and on
   buyer/seller it is the inline SVG that the wordmark rules above already recolour. */
:root[data-theme="light"] img.logo{filter:invert(1)}
@media (prefers-color-scheme: light){ :root:not([data-theme]) img.logo{filter:invert(1)} }

/* Cards were legible on dark because they were LIGHTER than the page. On light they are white on
   near-white, so the edge has to come from a shadow instead — a 1px border alone reads as a table. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .box,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .deal-card,
:root[data-theme="light"] .invite-card,
:root[data-theme="light"] .section-block{box-shadow:var(--shadow)}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .card,
  :root:not([data-theme]) .panel,
  :root:not([data-theme]) .box,
  :root:not([data-theme]) .stat,
  :root:not([data-theme]) .deal-card,
  :root:not([data-theme]) .invite-card,
  :root:not([data-theme]) .section-block{box-shadow:var(--shadow)}
}


/* The market picker's caret is a data: URI, so its stroke cannot be a token. Gold-on-white is
   2.4:1 and this is the affordance that tells you the field is a picker at all (#91). */
:root[data-theme="light"] #msaInput{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a5d18' stroke-width='1.6' stroke-linecap='round'/></svg>")}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) #msaInput{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a5d18' stroke-width='1.6' stroke-linecap='round'/></svg>")}
}

/* ---- The control itself. Mounted bottom-left by theme.js. -------------------------------------
   Bottom-LEFT and not bottom-right on purpose: widget.js parks the support launcher at
   right:20px/bottom:20px on sixteen of these pages and the two would sit on top of each other. */
.theme-toggle{
  position:fixed;left:14px;bottom:14px;z-index:8000;
  border:1px solid var(--line,#26384a);
  background:var(--panel,var(--card,#16232f));
  color:var(--text-dim,var(--muted,#9fb0bf));
  border-radius:8px;min-height:34px;min-width:34px;padding:0 10px;
  cursor:pointer;font-size:15px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{border-color:var(--gold,#c9a25b);color:var(--gold,#c9a25b)}
.theme-toggle:focus-visible{outline:2px solid var(--gold,#c9a25b);outline-offset:2px}
@media print{.theme-toggle{display:none}}