/* theme-roles.css — the dark mapping of every theme ROLE, ONE place (apps/core/theme.py).

   Linked by templates/_theme_head.html, so it reaches every page document of the ERP.
   ds/tokens.css (`html[data-theme] body.dark`) outranks the map on every document that links it;
   the literal values below are what the one document that does not — templates/500.html, which
   stands alone by design — draws with. The light theme defines NO role here: a component writes
   var(--role), tokens.css gives the light value, and dark renders this map. `body.dark` is set
   before the first paint by the same partial.

   Only the map, the light-island reset and browser-chrome fixes belong here; a component's
   own dark rule lives with the component. Guard: tools/guards.sh -> theme colours are tokens.
*/
body.dark{
  --surface-app:#16181d;--surface-1:#212429;--surface-2:#1b1e23;--surface-3:#2a2e35;--surface-hover:var(--surface-3);--surface-selected:rgba(2,196,196,.16);
  --text:#e8e9ec;--text-2:#c2c7d0;--text-muted:#9aa0ab;--text-disabled:#6b717c;
  --border:#31353d;--border-strong:#454a54;
  --input-bg:var(--surface-2);--input-text:var(--text);--input-border:#3a3f48;--input-placeholder:#858c98;
  /* the older names of the same roles. `--dark`/`--plum` are the brand's dark used as INK by older
     rules (a heading, a section row), so in dark mode they read as ink; a rule that wants the
     brand's dark as a FILL uses --brand-night. */
  --bg:var(--surface-app);--panel:var(--surface-1);--ink:var(--text);--muted:var(--text-muted);--line:var(--border);
  --dark:var(--text);--plum:var(--text);
  /* ink on a brand-teal fill (buttons, active tabs, badges): the best-contrast ink for the
     configured primary colour — the light theme keeps white unless Settings says otherwise */
  --on-accent-fill:var(--on-accent);
  --accent-text:#5fd6d6;
  /* status tints: translucent fills read as the colour on any dark surface; the text is a
     light shade of the same hue so it clears 4.5:1 on its own tint and on a plain card */
  --tint-danger-bg:rgba(239,68,68,.16);  --tint-danger-fg:#ff9c94;  --tint-danger-line:rgba(239,68,68,.42);
  --tint-warning-bg:rgba(245,158,11,.16);--tint-warning-fg:#f5c56e; --tint-warning-line:rgba(245,158,11,.42);
  --tint-success-bg:rgba(34,197,94,.14); --tint-success-fg:#7ddba6; --tint-success-line:rgba(34,197,94,.4);
  --tint-accent-bg:rgba(2,196,196,.14);  --tint-accent-fg:var(--accent-text);  --tint-accent-line:rgba(2,196,196,.42);
  --tint-info-bg:rgba(59,130,246,.16);   --tint-info-fg:#9dbfff;    --tint-info-line:rgba(59,130,246,.42);
  --tint-violet-bg:rgba(139,92,246,.18); --tint-violet-fg:#c4b1ff;  --tint-violet-line:rgba(139,92,246,.42);
  /* the document states (app.css names them; draft and cancelled are neutral) */
  --st-draft-bg:var(--surface-3);          --st-draft-fg:var(--text-muted);
  --st-sent-bg:var(--tint-info-bg);        --st-sent-fg:var(--tint-info-fg);
  --st-won-bg:var(--tint-success-bg);      --st-won-fg:var(--tint-success-fg);
  --st-lost-bg:var(--tint-danger-bg);      --st-lost-fg:var(--tint-danger-fg);
  --st-cancel-bg:var(--surface-3);         --st-cancel-fg:var(--text-muted);
  --st-warn-bg:var(--tint-warning-bg);     --st-warn-fg:var(--tint-warning-fg);
  background:var(--surface-app);color:var(--text);color-scheme:dark}
/* A region that must stay LIGHT inside a dark page — a document preview, a customer's logo
   tile, and the HP module, which is brand-faithful white by decision. `initial` makes a
   role guaranteed-invalid, so every var(--role,<light>) inside falls back to its light value. */
body.dark [data-theme-keep],body.dark .hp-app{color-scheme:light;--surface-app:initial;--surface-1:initial;--surface-2:initial;--surface-3:initial;--surface-hover:initial;--surface-selected:initial;--text:initial;--text-2:initial;--text-muted:initial;--text-disabled:initial;--border:initial;--border-strong:initial;--input-bg:initial;--input-border:initial;--input-text:initial;--input-placeholder:initial;--tint-danger-bg:initial;--tint-danger-fg:initial;--tint-danger-line:initial;--tint-warning-bg:initial;--tint-warning-fg:initial;--tint-warning-line:initial;--tint-success-bg:initial;--tint-success-fg:initial;--tint-success-line:initial;--tint-accent-bg:initial;--tint-accent-fg:initial;--tint-accent-line:initial;--tint-info-bg:initial;--tint-info-fg:initial;--tint-info-line:initial;--tint-violet-bg:initial;--tint-violet-fg:initial;--tint-violet-line:initial;--accent-text:initial}
/* Browser autofill paints its own pale-yellow/white box over a field; in dark mode that
   is a white slab with light text on it. Repaint it with the field's own colours. */
body.dark input:-webkit-autofill,body.dark input:-webkit-autofill:hover,body.dark input:-webkit-autofill:focus,
body.dark textarea:-webkit-autofill,body.dark select:-webkit-autofill{
  -webkit-text-fill-color:var(--input-text);caret-color:var(--input-text);
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;box-shadow:0 0 0 1000px var(--input-bg) inset;
  transition:background-color 99999s}
body.dark option,body.dark optgroup{background:var(--surface-3);color:var(--text)}
body.dark ::placeholder{color:var(--input-placeholder,color-mix(in srgb,var(--text-keep) 70%,var(--surface-keep)))}
/* Every form field and table header takes the theme. A light island keeps its light controls. */
body.dark :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea):not([data-theme-keep] *){
  background:var(--input-bg);color:var(--input-text);border-color:var(--input-border)}
body.dark :is(input[type=date],input[type=time],input[type=datetime-local]):not([data-theme-keep] *){color-scheme:dark}
body.dark table th:not([data-theme-keep] *){background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
body.dark table td:not([data-theme-keep] *){border-color:var(--border)}
body.dark{scrollbar-color:var(--border-strong) transparent}