/* Bartix CRM — tokens. The only place raw values live. data-fs on <html> = the user's text size, per
   device: 14 (Mały) · 15 (Zwykły) · 17 (Większy) · 20 (Największy) — v5 zooms its regions by --z (D11);
   what is left of v4 (app.css: the phone note, „Nowy szablon", a mail's body) grows through rem, and
   since v5 ticket 6 it is set in Archivo too: no Roboto is loaded.

   Rules v4's stylesheet followed (drafts/ui-v4/NOTES.md, „The system"):
   - one control height (--ctl) for buttons, inputs, tabs, nav rows, menu rows, attachment chips
   - three buttons: .primary (filled), default (outlined), .plain (no border); a frame only
     where you type — the toolbar's buttons and attachment chips are plain (round 4)
   - a tag is not a button: one shape, --tag high, filled, never outlined
   - colour roles: --action = press / type here · selected = one step off the surface + a
     black edge (sidebar, the open row), --ink fill for the kinds bar · --mark = waiting on us ·
     --danger = urgent or overdue · --ink-3 = the second layer of text (meta, signatures, quotes)
   - weights: 400 text · 500 what you press or what is selected · 700 titles, unread and a
     message's sender */

:root {
  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;

  --t-sm: max(14px, .9375rem); /* meta, summaries, tags. Nothing smaller. */
  --t-base: 1rem;              /* 15px at Zwykły */
  --t-read: 1.0625rem;         /* message bodies, names */
  --t-title: 1.25rem;          /* a section's title: a window's, an empty state's, a form's */
  --t-page: 1.5rem;            /* page title, a conversation's subject (round 4, R2) */

  --sheet: #FFFFFF;
  --side-bg: #EFEFEF;
  --fill: #F0F1F2;         /* quiet fill: our own messages, tags, notices */
  --hover: #ECEDEE;
  --selected: #E3E5E8;

  --ink: #15181C;
  --ink-2: #3B4148;
  --ink-3: #5C636C;

  --line: #D8DADD;
  --line-strong: #8F959D;   /* control borders: an input looks like an input */

  --action: #1750A8;
  --action-hover: #0F3F8A;
  --action-tint: #E6EDF8;      /* the reply box's one flash when a template goes in */
  --mark: #FFD43B;
  --danger: #B4261B;
  --ok: #1B7742;
  --ok-tint: #E3F1E8;          /* --ok at rest: behind a sent row, a reply that just went out, „Wysłane" taking it */

  --ctl: max(40px, 2.5rem);    /* every control: 40px at Zwykły, grows with the text */
  --tag: max(24px, 1.5rem);    /* every tag and count */
  --r: 8px;
  --r-tag: 6px;
  --pad: 1.5rem;               /* page gutter */
  --side-w: 13.25rem;
  --side-slim: calc(var(--ctl) + .8rem + 1px);   /* the sidebar as icons (ticket 17): one control and its gutter */
  --banner: 0px;               /* the dry-run strip, when the server is in MAIL_DRYRUN */
}

html { font-size: 15px; }
html[data-fs="14"] { font-size: 14px; }
html[data-fs="17"] { font-size: 17px; }
html[data-fs="20"] { font-size: 20px; }

/* v5 (drafts/ui-v5/poczta.html, its :root): the Gmail layering — a cool page, one white sheet, read
   rows sunk — in Archivo 13 px. Five names are v4's too: v5's values hold inside .app, the toast, the
   login page and v5's dialogs; v4's windows (the phone note, „Nowy szablon") keep theirs. */
:root {
  --page: #F3F5F9; --surface: #FFFFFF; --sunk: #F4F6FA; --read: #F6F8FC; --select: #DCE7F7;
  --rule: #E4E8EE; --rule-2: #C8D0D9;
  --accent: #1F5BC4; --accent-ink: #174A9F; --accent-tint: #E8EFFB; --accent-line: #A9C1EA; --accent-soft: #D7E6FB;
  --star: #E0A100; --star-tint: #FFF6D6;
  --warn: #A15F00; --warn-tint: #FBF1E0;
  --red: #C2410C; --red-tint: #FBE9E2;
  --hit: #FCE493;   /* what the search found, marked in its results */
  --row: 38px; --nav: 224px; --side: 300px;
  --f: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --z: 1;   /* the text size (D11): v5 is drawn at 13 px; Większy and Największy zoom its regions */
}
html[data-fs="14"] { --z: .92; }
html[data-fs="17"] { --z: 1.15; }
html[data-fs="20"] { --z: 1.3; }
.app, .toast, .lg, .v5-dlg, #fpop { --ink: #17202B; --ink-2: #4A5666; --ink-3: #7D8898; --ok: #16805A; --ok-tint: #E3F3EB; }
.note-dlg { --ink: #15181C; --ink-2: #3B4148; --ink-3: #5C636C; --ok: #1B7742; --ok-tint: #E3F1E8; }