/* ════════════════════════════════════════════════════════════════════════════
   warm-skin.css — the rep's Home and the manager's Main Dashboard in the
   colours of the supplied reference (2026-10-10, "these colours exactly").

   Every value below was MEASURED from the reference image (pixels sampled in
   a canvas, 5×5 averages for surfaces, the brightest / most saturated pixel
   for text), not picked by eye:
     page #130A03 with a warm glow #281B15 · sidebar #191009
     cards #0C0904, lit at the top (#261D1A) · raised #261A15 · selected #392B1B
     transaction row #271407 · accent orange #FC6701 · brown button #735135
     hero gradient #4B1F02 → #F2972D → #241304 · card stack #8B3D07 → #9F6132 → #572602
     mint #43E6A7 (legend #11FBA6) · green bar #209261 → #194E34
     text #FFFDFA · greys #9D9894 / #7B685A · soft orange #FFC382
     chart fill #903A03 → #180A03

   TEXT ON ORANGE is the reference's near-black #130A03, not its white: white
   on #FC6701 measures 2.97:1 against the 4.5:1 minimum (the WCAG suite caught
   it); #130A03 on it is 6.8:1, and both colours are the reference's own.

   SCOPE: the dark theme, on those two screens only (body.is-rep in the rep
   app, body.is-dash on the manager's dashboard). The light theme keeps its
   pastel cards. Layout, data and logic are untouched: this sets each card's
   own colour tokens, as tones.css does. Loaded last.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --w-bg: #130A03; --w-glow: #281B15; --w-side: #191009;
  --w-card: #0C0904; --w-card-top: #261D1A; --w-raised: #261A15; --w-sel: #392B1B; --w-row: #271407;
  --w-track: #2A1C14; --w-line: rgba(255, 222, 196, .07); --w-line-2: rgba(255, 222, 196, .14);
  --w-orange: #FC6701; --w-orange-2: #F86806; --w-brown: #735135;
  --w-mint: #43E6A7; --w-mint-2: #11FBA6; --w-green: #209261; --w-green-deep: #194E34;
  --w-up: #43E6A7; --w-dn: #F2777C;
  --w-text: #FFFDFA; --w-muted: #9D9894; --w-faint: #7B685A; --w-soft: #FFC382;
  --w-chart-top: #903A03; --w-chart-low: #180A03;
  --w-hero: radial-gradient(130% 120% at 100% 0%, #F2972D 0%, #A45514 30%, #4B1F02 62%, #241304 100%);
  --w-stack: linear-gradient(160deg, #8B3D07 0%, #9F6132 45%, #572602 100%);
  --w-lit: linear-gradient(180deg, rgba(255, 226, 204, .075) 0%, rgba(255, 226, 204, 0) 42%);
}

/* ── The page and its frame ───────────────────────────────────────────────── */
:root:not([data-scheme="light"]) body:is(.is-rep, .is-dash) {
  /* no-repeat: the body's background is drawn on the page, sized to <html>,
     which is one screen tall (height: 100%). Repeated, the glow started again
     every screen down, a hard line across the page (v4.130.2). */
  background: radial-gradient(1100px 560px at 38% -10%, var(--w-glow) 0%, transparent 70%) no-repeat, var(--w-bg);
}
:root:not([data-scheme="light"]) body:is(.is-rep, .is-dash) .bgfx__aurora { opacity: .45; }
:root:not([data-scheme="light"]) body:is(.is-rep, .is-dash) :is(.side, .rail) {
  background: var(--w-side); border-color: var(--w-line);
}
:root:not([data-scheme="light"]) body.is-rep .topbar { background: transparent; border-color: var(--w-line); }

/* ── Every card: the reference's near-black, lit at the top ───────────────── */
:root:not([data-scheme="light"]) body:is(.is-rep, .is-dash) :is(.tone, .md-grid--row > .md-tile) {
  --t-card: var(--w-card); --t-raised: var(--w-raised); --t-track: var(--w-track);
  --t-line: var(--w-line); --t-line-2: var(--w-line-2);
  --t-ink: var(--w-text); --t-icon: var(--w-orange); --t-muted: var(--w-muted); --t-faint: #8C8079;
}
:root:not([data-scheme="light"]) body:is(.is-rep, .is-dash) :is(.mc, .dv, .cf, .al, .ps, .fu, .panel.tone, .rdr, .near, .md-grid--row > .md-tile) {
  background-image: var(--w-lit);
}
:root:not([data-scheme="light"]) body.is-dash .md .md-grid--row > button.md-tile:hover { background: var(--w-raised); }

/* ── Accents: orange where the app had amber; mint for up, soft red for down ─ */
:root:not([data-scheme="light"]) body.is-dash .md {
  --md-acc: var(--w-orange); --md-ink: var(--w-bg); --md-card: var(--w-card);
  --md-amber: var(--w-soft); --md-green: var(--w-green); --md-up: var(--w-up); --md-dn: var(--w-dn);
  --md-line-cur: var(--w-orange); --md-line-prev: #6E625A;
  --md-text: var(--w-text); --md-muted: var(--w-muted); --md-line: var(--w-line); --md-line-2: var(--w-line-2);
}
/* The revenue chart's fill: the reference's orange area. */
:root:not([data-scheme="light"]) body.is-dash .md .md-chart stop { stop-color: var(--w-orange); }
:root:not([data-scheme="light"]) body.is-dash .md .md-ch-dot { background: var(--w-text); box-shadow: 0 0 0 4px rgba(252, 103, 1, .35), 0 0 14px rgba(255, 253, 250, .6); }
/* The tab bar: the reference's pill group, the chosen one in the brown it uses. */
:root:not([data-scheme="light"]) body.is-dash .md .md-tabs { background: var(--w-card); border-color: var(--w-line); }
:root:not([data-scheme="light"]) body.is-dash .md .md-tab.is-on { background: var(--w-sel); color: var(--w-text); box-shadow: inset 0 0 0 1px var(--w-line-2); }

:root:not([data-scheme="light"]) body.is-dash :is(.mc) {
  --mc-acc: var(--w-orange); --mc-acc-2: var(--w-chart-top); --mc-acc-text: var(--w-soft); --mc-ink: var(--w-bg);
  --mc-green: var(--w-green); --mc-up: var(--w-up); --mc-dn: var(--w-dn); --mc-text: var(--w-text);
}
/* Daily sales volume: the reference's bars, the highlighted one in its green. */
:root:not([data-scheme="light"]) body.is-dash .dv {
  --dv-acc: var(--w-orange); --dv-acc-2: var(--w-chart-top); --dv-acc-text: var(--w-soft); --dv-amber: var(--w-soft); --dv-ink: var(--w-bg);
  --dv-text: var(--w-text); --dv-grid: rgba(255, 222, 196, .06); --dv-tip-bg: var(--w-raised);
}
:root:not([data-scheme="light"]) body.is-dash .cf {
  --cf-acc: var(--w-orange); --cf-ink: var(--w-bg); --cf-ok: var(--w-mint); --cf-ok-bg: rgba(67, 230, 167, .12); --cf-text: var(--w-text);
}
/* Top performer: the reference's orange card stack. */
:root:not([data-scheme="light"]) body.is-dash .tp {
  --tp-acc: #FFFFFF; --tp-acc-deep: var(--w-soft); --tp-acc-text: #FFE3C4; --tp-ink: #2A1305; --tp-green: var(--w-mint);
  --tp-card: transparent; --tp-raised: rgba(12, 9, 4, .35); --tp-track: rgba(12, 9, 4, .45);
  --tp-line: rgba(255, 226, 204, .18); --tp-text: var(--w-text); --tp-text-2: #FFE9D6; --tp-muted: #F3D3B8;
  background: var(--w-stack); border-color: rgba(255, 226, 204, .14);
}
:root:not([data-scheme="light"]) body.is-dash .tone .tp-title { color: var(--w-text); }
:root:not([data-scheme="light"]) body.is-dash .al {
  --al-acc: var(--w-orange); --al-acc-text: var(--w-soft); --al-ink: var(--w-bg); --al-text: var(--w-text); --al-red: var(--w-dn);
  --al-hover: var(--w-row);
}

/* ── Rep Home ─────────────────────────────────────────────────────────────── */
/* The header is a card like the manager's KPI tiles: near-black, lit at the
   top, its volume tile on the raised brown (it was the orange hero card until
   v4.132, which the manager's dashboard does not have). */
:root:not([data-scheme="light"]) body.is-rep .tone .dh {
  --dh-acc: var(--w-orange); --dh-ink: var(--w-bg); --dh-amber: var(--w-soft); --dh-green: var(--w-mint); --dh-red: var(--w-dn);
  --dh-card: var(--w-card); --dh-tile: var(--w-raised); --dh-track: var(--w-track);
  --dh-line: var(--w-line); --dh-line-2: var(--w-line-2);
  --dh-text: var(--w-text); --dh-text-2: #E3D9D0; --dh-muted: var(--w-muted);
  /* v4.160: the panel sits on the page; the volume card inside it is the box. */
  background: none; border-color: transparent;
}
/* No accent stripe across its top: the manager's tiles have none. */
:root:not([data-scheme="light"]) body.is-rep .tone .dh::before { display: none; }
/* Its buttons' icons: the manager's orange icon squares. The check-in keeps
   its red / green, which says whether the rep has checked in today. */
:root:not([data-scheme="light"]) body.is-rep .dh-btn[data-action]:not([data-action="checkin"]) { --tile: var(--w-orange); }
:root:not([data-scheme="light"]) body.is-rep .tone .ps {
  --ps-acc: var(--w-orange); --ps-acc-ink: var(--w-soft); --ps-ink: var(--w-bg);
  --ps-text: var(--w-text);
  /* The three outcomes in the manager's Pipeline colours (manager-cards.css
     under this skin): Approved orange, Awaiting grey, Rejected red. */
  --ps-approved: var(--w-orange); --ps-approved-ink: #FF7A1A;
  --ps-awaiting: #8A929B; --ps-awaiting-ink: #A9B1BA;
  --ps-rejected: #D9564A; --ps-rejected-ink: var(--w-dn);
}
:root:not([data-scheme="light"]) body.is-rep .tone .fu {
  --fu-acc: var(--w-orange); --fu-ink: var(--w-bg); --fu-green: var(--w-mint); --fu-red: var(--w-dn); --fu-text: var(--w-text);
}
/* The order button: the reference's orange "Transfer". */
:root:not([data-scheme="light"]) body.is-rep #openQuote { background: var(--w-orange); color: var(--w-bg); border-color: var(--w-orange); }
:root:not([data-scheme="light"]) body.is-rep #openQuote:hover { background: var(--w-orange-2); }
/* Recent activity rows: the reference's transaction rows. */
:root:not([data-scheme="light"]) body.is-rep .panel.tone .acts > * { background: var(--w-row); border-color: var(--w-line); }

/* ── Every other rep screen (v4.132) ──────────────────────────────────────────
   The app's own tokens (theme.css), re-pointed at the same palette, so Orders,
   Products, Accounts, Quotations, the sheets and the rest are the manager's
   dashboard too: the warm page, near-black cards, the raised brown, orange
   for the accent. Navigation icons keep their colours, as the manager's
   sidebar does; status colours (approved, rejected) keep their meaning. */
:root:not([data-scheme="light"]) body.is-rep {
  --canvas: var(--w-bg);
  --e1-bg: var(--w-card); --e1-border: var(--w-line); --e1-shadow: inset 0 1px 0 rgba(255, 226, 204, .06);
  --e2-bg: var(--w-raised); --e2-border: rgba(255, 222, 196, .10); --e2-shadow: inset 0 1px 0 rgba(255, 226, 204, .07);
  --e3-bg: var(--w-sel); --e3-border: var(--w-line-2);
  --hairline: rgba(255, 222, 196, .08); --hairline-strong: var(--w-line-2);
  --wash: rgba(255, 226, 204, .055); --wash-strong: rgba(255, 226, 204, .10);
  --glass: rgba(19, 10, 3, .80);
  /* v4.137: accent, inks, green and red are NOT re-pointed any more. Measured
     side by side, the rep app had gone orange with warm greys while the
     manager keeps the theme's amber (#F7A11A) and cool greys everywhere but
     inside its dashboard cards. Left to theme.css, both apps now resolve the
     same values; the warm surfaces above already render as the manager's. */
}
/* Settings: rows are cards (accents and icon colours are the theme's, as the manager's). */
:root:not([data-scheme="light"]) body.is-rep .st {
  --st-row: var(--w-card); --st-row-hover: var(--w-raised); --st-sunk: #0A0603;
  --st-line: var(--w-line); --st-line-2: var(--w-line-2);
  --st-av-bg: var(--w-raised); --st-ring: var(--w-bg); --st-switch-off: #3A2E26;
  --st-hover: rgba(255, 226, 204, .06);
}
/* The delivery route map's frame, the check-in screen, the fluid-sample sheet
   and the Smart Advisor's frame. */
:root:not([data-scheme="light"]) body.is-rep .mp { --mp-shell: var(--w-card); }
:root:not([data-scheme="light"]) body.is-rep .ci {
  --ci-card: var(--w-card); --ci-raised: var(--w-raised); --ci-line: var(--w-line); --ci-line-2: var(--w-line-2);
}
:root:not([data-scheme="light"]) body.is-rep .fs {
  --fs-bg: var(--w-bg); --fs-surface: var(--w-card); --fs-raised: var(--w-raised); --fs-sunk: #0A0603;
  --fs-line: rgba(255, 222, 196, .12); --fs-line-2: rgba(255, 222, 196, .22);
  --fs-glass: rgba(19, 10, 3, .96); --fs-glass-2: rgba(19, 10, 3, .97); --fs-ic-bg: rgba(255, 226, 204, .06);
}
:root:not([data-scheme="light"]) body.is-rep .la { --la-shell: var(--w-side); --la-shell-raised: var(--w-raised); }
/* The bell's reply notices were amber on amber; the accent now. */
:root:not([data-scheme="light"]) body.is-rep .bell__i.is-reply .bell__ico { background: var(--accent-wash); color: var(--accent-ink); }