/* ════════════════════════════════════════════════════════════════════════════
   rep-tones.css — the rep app's box colours (2026-10-10, on request: "the
   boxes' colours only", as on the manager dashboard).

   Home                                  Sales Report
     Your volume header   emerald          Total Sales          green
     New order request    amber            Total Proposed       cyan
     Proposals by status  cyan             Total Proposals      indigo
     Follow-ups           rose             Average Deal Value   amber
     Clients near me      blue             Accounts             teal
     Delivery route map   teal             Volume Sold          emerald
     Recent activity      slate            Activity this month  slate
                                           Customer Habits      sky
                                           Top clients          purple
                                           Product Statistic    orange
                                           Customer Growth      blue

   Same hue, same meaning as the manager's (money green, volume emerald,
   pipeline cyan, the record slate …). The palette and the surfaces it makes
   are tones.css; this file only sets each box's own tokens. Nothing in the
   components or their logic changes. The two map cards keep their map and
   radar: only their frame and header take the tint.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Your volume header (dashboard-header.js) ─────────────────────────────── */
:root:root .tone .dh {
  --dh-card: var(--t-card); --dh-tile: var(--t-raised); --dh-track: var(--t-track);
  --dh-line: var(--t-line); --dh-line-2: var(--t-line-2); --dh-muted: var(--t-muted);
  border-color: transparent;       /* v4.160: the volume card inside is the box */
}

/* ── Proposals by status (proposals-card.js) ──────────────────────────────── */
:root:root .tone .ps {
  --ps-card: var(--t-card); --ps-raised: var(--t-raised); --ps-track: var(--t-track);
  --ps-line: var(--t-line); --ps-muted: var(--t-muted);
  border-color: var(--t-line);
}
:root:root .tone .ps-title { color: var(--t-ink); }

/* ── Follow-ups (follow-ups.js) ───────────────────────────────────────────── */
:root:root .tone .fu {
  --fu-card: var(--t-card); --fu-raised: var(--t-raised); --fu-sunk: var(--t-raised);
  --fu-line: var(--t-line); --fu-line-2: var(--t-line-2); --fu-muted: var(--t-muted); --fu-faint: var(--t-faint);
  border-color: var(--t-line);
}
:root:root .tone .fu-title { color: var(--t-ink); }

/* ── Clients near me: the frame and the list, not the radar disc ──────────── */
:root:root .dcard--radar.tone { border-color: var(--t-line); }
:root:root .tone .rdr, :root:root .tone .near { background: var(--t-card); }
:root:root .tone .rdr__title { color: var(--t-ink); }

/* ── Delivery route map: the frame and header, not the map ────────────────── */
:root:root .dcard--route.tone { border-color: var(--t-line); }
:root:root .tone .mp { --mp-shell: var(--t-card); }
:root:root .tone .mp--light { background: var(--t-card); border-color: var(--t-line); }
:root:root .tone .mp-title { color: var(--t-ink); }

/* ── Plain panels: New order request, Recent activity ─────────────────────── */
:root:root .panel.tone { background: var(--t-card); border-color: var(--t-line); }
:root:root .panel.tone > .h2 { color: var(--t-ink); }

/* ── Sales Report: the six figures ────────────────────────────────────────── */
:root:root .rp-stat.tone { background: var(--t-card); border-color: var(--t-line); }
:root:root .rp-stat.tone:hover { border-color: var(--t-line-2); }
:root:root .rp-stat.tone .rp-stat__k { color: var(--t-ink); }
:root:root .rp-stat.tone .rp-stat__ico { background: var(--t-icon); color: #FFFFFF; }

/* ── Sales Report: the cards ──────────────────────────────────────────────── */
:root:root .lo-card.tone { background: var(--t-card); border-color: var(--t-line); }
:root:root .lo-card.tone .lo-card__h h2 { color: var(--t-ink); }
:root:root .lo-card.tone .lo-card__ico { background: var(--t-icon); color: #FFFFFF; }
/* The FRI / SAT labels are a fixed grey (#7D858F, 4.7:1 on the plain card);
   on the rose tint that is 4.3:1, so on a toned card they take the card's own
   muted grey, which holds 4.5:1 on it in both themes. */
:root:root .tone .fu .fu-dow.is-weekend { color: var(--t-muted); }