/* The CRM. Its own colours and its own screens, inside the shared frames in
   styles.css. docs/SCREENS.md is the contract. Linked only from work/crm.html
   and the CRM's card on the front page.

   The screens are the app itself, photographed at 2x with invented data, not
   drawn: one file for the day and one for the night, and the page's
   data-theme picks which shows. The hidden one is display: none, so a lazy
   image in the other theme is never fetched. */

/* ---- Theme, day ----
   Read off the light screenshots: the app's chrome is --sys-bg, so the status
   bar and the strip under the tab bar run into the app's own header and foot;
   its working ground is --sys-surface, which the window's toolbar takes. */
[data-system="crm"] {
  --sys-bg: #FAF9F5;
  --sys-surface: #EDE9DF;
  --sys-ink: #08191F;
  --sys-muted: #6B6559;
  --sys-line: #D6CFBD;
  --sys-accent: #0F2F3D;
  --sys-on-accent: #FAF9F5;
}

/* ---- Theme, night. The app's own deep teal, read off the dark screenshots. ---- */
[data-theme="dark"] [data-system="crm"] {
  --sys-bg: #0C2833;
  --sys-surface: #0F2F3D;
  --sys-ink: #FAF9F5;
  --sys-muted: #B9D0D8;
  --sys-line: #324952;
  --sys-accent: #7FA8B5;
  --sys-on-accent: #0C2833;
}

/* ---- Screens ---- */
[data-system="crm"] .crm-shot { display: block; width: 100%; height: auto; }
[data-system="crm"] .crm-shot--night { display: none; }
[data-theme="dark"] [data-system="crm"] .crm-shot--day { display: none; }
[data-theme="dark"] [data-system="crm"] .crm-shot--night { display: block; }