/* public/theme.css
 *
 * Palette overrides that let the standalone dashboard HTML files follow the
 * app's theme switcher (Original / Mono / Olive, see app/globals.css).
 *
 * WHY THIS FILE EXISTS. The dashboards are not React. They are full HTML
 * documents loaded into an <iframe> by components/dashboard/DashboardEmbed.tsx,
 * and CSS custom properties do NOT cross an iframe boundary. So when the theme
 * switcher shipped (2026-07-24) it repainted the nav chrome and left every
 * actual dashboard on its original palette, which read as "the themes do
 * nothing". public/theme.js sets data-theme on each frame's own <html>; this
 * file is what those attributes then select.
 *
 * WHAT IT TOUCHES. Chrome only: page background, panels, text, hairlines and
 * the accent. It deliberately leaves the DATA colors alone (--pos, --neg,
 * --blue, --warn, --a0..--a4, --c0..--c4, and the JS PALETTE / AEHEX / ARHEX
 * arrays inside each file). Chart series and status chips have to stay
 * distinguishable and mean the same thing in every theme; a green "collected"
 * bar that turns gray under Mono is a data bug, not a restyle. --gold is the
 * one judgement call: it is chrome as often as it is a series color, so Mono
 * neutralizes it and Olive warms it rather than either theme dropping it.
 *
 * Original is not defined here on purpose. No [data-theme] attribute means no
 * rule in this file matches and each dashboard keeps the exact :root block it
 * shipped with, so Original stays pixel-identical.
 *
 * NOT wired up: camademenu.html and azmademenu.html (the public customer menus
 * behind /mademenu and /azmademenu). Those are brand collateral that retailers
 * see, so they keep one fixed look regardless of what an internal user picked.
 * The Aging Report is a separate cross-origin app (made-menu-internal) and
 * cannot be reached from here at all.
 *
 * Specificity note: :root[data-theme="x"] is (0,2,0) and beats the plain
 * :root (0,1,0) inside each dashboard's own <style>, so link order does not
 * matter. The body rules need the descendant form for the same reason, since
 * each file sets its background-image on a bare `body` selector.
 */

/* ============================ MONO ============================
   Ink on paper. Neutral gray ramp, no hue in the chrome. Accent collapses to
   ink so weight and contrast carry emphasis instead of color. */
:root[data-theme="mono"] {
  --bg: #f4f4f3;
  --panel: #ffffff;
  --panel-2: #fafafa;
  --ink: #111110;
  --muted: #6b6b69;
  --faint: #9a9a97;
  --line: #e4e4e2;
  --line-strong: #d2d2cf;

  --accent: #111110;
  --accent-deep: #2a2a28;
  --accent-wash: #1111100f;
  --accent-wash2: #1111101a;

  --gold: #7a7a77;
  --gold-deep: #57574f;
  --gold-wash: #7a7a7714;
}

/* Each dashboard tints its body with two radial gradients built from the
   teal and gold hex. Monochrome has no hue to tint with, so drop them. */
:root[data-theme="mono"] body {
  background-image: none;
}

/* ============================ OLIVE ============================
   Warm olive neutrals with the amber accent, matching the in-app Olive. */
:root[data-theme="olive"] {
  --bg: #f0efe7;
  --panel: #faf9f4;
  --panel-2: #f7f6ef;
  --ink: #15170f;
  --muted: #66695c;
  --faint: #918f7f;
  --line: #dedcd1;
  --line-strong: #cbc8b7;

  --accent: #b26c0e;
  --accent-deep: #8a520a;
  --accent-wash: #b26c0e14;
  --accent-wash2: #b26c0e1f;

  --gold: #a08420;
  --gold-deep: #7a6318;
  --gold-wash: #a0842016;
}

:root[data-theme="olive"] body {
  background-image:
    radial-gradient(900px 500px at 100% -10%, #b26c0e12, transparent 60%),
    radial-gradient(700px 420px at -10% 110%, #a0842010, transparent 55%);
}