/* НИ-КАЙ — the themes (docs/THEMES.md). Every colour of the pages comes from one of these roles; ux.css (the pages),
   app.css (the screens of the sync, the printers, the server admin program, the login) only use them.
   The active theme is <html data-theme="...">, read from the PC's settings file (ui.json, shared by nikai and
   nikai-admin and their apps; web/lib/theme.js). A new theme: a block of the same roles below and its name in
   web/lib/theme.js THEMES and src/server.zig `themes`.

   Roles
     surfaces   --c-bg          the page behind everything
                --c-surface     cards, panels, tables, dialogs, inputs
                --c-surface-2   table heads, hovered rows, the path bar, the key bar's keys
                --c-surface-3   pressed / inset things: key caps, badges, read-only fields
     text       --c-text        normal text
                --c-text-muted  labels, hints, secondary text
                --c-text-faint  placeholders, separators, disabled
     lines      --c-line        borders between rows and around panels
                --c-line-strong borders of inputs and buttons, hovered borders
     accent     --c-accent      the program's colour: headings of the open column, primary marks, links
                --c-accent-2    the accent when hovered / brighter
                --c-accent-soft a light wash of the accent (the open column's head, the screens' titles)
                --c-on-accent   text on the accent
     top bar    --c-bar         the top bar
                --c-on-bar      text on the top bar
     selection  --c-sel         the row / item / cell under the cursor
                --c-sel-soft    the selected row when its table is not focused, the calendar's today
                --c-on-sel      text on the selection
                --c-focus       the focus ring around inputs
                --c-focus-ring  the solid focus ring of the modern pages (>= 3:1 on the surfaces)
     banners    --ux-banner-info, --ux-banner-warn, --ux-banner-error   their backgrounds (the text stays --c-text)
     input      --c-input       background of an input field
                --c-input-line  its border
                --c-input-on    the field being edited (the old screens' active field)
     status     --c-ok, --c-ok-soft          saved, positive, paid
                --c-warn, --c-warn-soft      overridden values, warnings
                --c-danger, --c-danger-soft  errors, deletions, negative amounts
                --c-on-status                text on a full status colour
                --c-mark, --c-on-mark        tags and marks (the sync history's tags)
     scroll bar --c-scroll       its thumb (rounded, no rail) and the triangles at its ends
                --c-scroll-on    the thumb / a triangle under the mouse
                --c-scroll-end   a triangle at the end it points to (nothing more to scroll there)
                (default: from the lines and the text; a theme may set them)
     depth      --c-scrim       the veil behind a dialog
                --c-shadow      small shadow (cards): none — the pages are flat, a line separates them
                --c-shadow-l    the soft shadow all around a drop-down list or a dialog (no offset: nothing pops out
                                to one side)
*/

/* ---------------------------------------------------------------- default (light; dark when the system is dark)
   [data-theme-preview]: the samples on the theme page (web/ux/theme.js) */
:root, [data-theme-preview="default"] {
  --c-bg: #f3f5f8;
  --c-surface: #ffffff;
  --c-surface-2: #f7f9fb;
  --c-surface-3: #eef2f6;
  --c-text: #18212b;
  --c-text-muted: #64707e;
  --c-text-faint: #95a0ad;
  --c-line: #dfe4ea;
  --c-line-strong: #c9d1da;
  --c-accent: #1d5fb4;
  --c-accent-2: #2a72d0;
  --c-accent-soft: #e7f0fb;
  --c-on-accent: #ffffff;
  --c-bar: var(--c-accent);
  --c-on-bar: var(--c-on-accent);
  --c-sel: #2563eb;
  --c-sel-soft: #e3ecfe;
  --c-on-sel: #ffffff;
  --c-focus: rgba(37, 99, 235, .28);
  --c-input: #ffffff;
  --c-input-line: #c9d1da;
  --c-input-on: #fff8d6;
  --c-ok: #157f3b;
  --c-ok-soft: #e4f5ea;
  --c-warn: #b25e09;
  --c-warn-soft: #fff4e0;
  --c-danger: #c0262d;
  --c-danger-soft: #fdeceb;
  --c-on-status: #ffffff;
  --c-mark: #f2c94c;
  --c-on-mark: #222222;
  --c-scrim: rgba(15, 23, 33, .38);
  --c-shadow: none;
  --c-shadow-l: 0 0 14px rgba(16, 24, 40, .16);
  /* UX redesign tokens (web/ux/core.css): a solid focus ring (>= 3:1 on the surfaces), the banners' backgrounds */
  --c-focus-ring: #2563eb;
  --ux-banner-info: #e8f0fb;
  --ux-banner-warn: #fff3dc;
  --ux-banner-error: #fdeceb;
  color-scheme: light;
}
/* the scroll bar's roles follow the theme's lines and text unless the theme sets them */
:root, [data-theme-preview] {
  --c-scroll: color-mix(in srgb, var(--c-text-faint) 70%, transparent);
  --c-scroll-on: var(--c-text-muted);
  --c-scroll-end: color-mix(in srgb, var(--c-text-faint) 35%, transparent);
}
/* the density of the modern pages (UX spec §3.7; html[data-density=compact] in web/ux/shell.css makes them smaller)
   and the width of the focus ring: the same in every theme */
:root {
  --ux-row-h: 2.05rem;
  --ux-gap: 0.7rem;
  --ux-pad: 1rem;
  --ux-focus-w: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="default"], [data-theme-preview="default"] {
    --c-bg: #0f141a;
    --c-surface: #171d25;
    --c-surface-2: #1c232d;
    --c-surface-3: #232c38;
    --c-text: #e4e9ef;
    --c-text-muted: #9ba7b5;
    --c-text-faint: #6f7b89;
    --c-line: #2b3441;
    --c-line-strong: #3a4553;
    --c-accent: #4b8fe0;
    --c-accent-2: #5d9de6;
    --c-accent-soft: #172a42;
    --c-sel: #4f86f7;
    --c-sel-soft: #1d2b47;
    --c-input: #171d25;
    --c-input-line: #3a4553;
    --c-input-on: #3a3415;
    /* the status colours brighter on the dark surfaces (the light theme's ones were too dark to read there) */
    --c-ok: #4cc27a;
    --c-ok-soft: #13301f;
    --c-warn: #e8a23a;
    --c-warn-soft: #3a2a10;
    --c-danger: #f06a6f;
    --c-danger-soft: #3b1a1c;
    --c-on-status: #0f141a;
    --c-shadow-l: 0 0 16px rgba(0, 0, 0, .5);
    --c-focus-ring: #5b8ff8;
    --ux-banner-info: #172a42;
    --ux-banner-warn: #3a2a10;
    --ux-banner-error: #3b1a1c;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- Solarized (ethanschoonover.com/solarized)
   Only the 16 colours of the palette (a soft status wash is a palette colour mixed into the background):
   base03 #002b36  base02 #073642  base01 #586e75  base00 #657b83  base0 #839496  base1 #93a1a1  base2 #eee8d5
   base3 #fdf6e3   yellow #b58900  orange #cb4b16  red #dc322f  magenta #d33682  violet #6c71c4  blue #268bd2
   cyan #2aa198    green #859900
   light: background base3, body text base00, emphasis base01, secondary base1, highlights base2
   (light: the page is base3 like the cards, as the dark page is base03 like its cards — owner 2026-11-01; the second
   surfaces are base2, and the lines base2 with some base1 in it, else they vanish on a base2 surface)
   dark:  background base03, body text base0, emphasis base1, secondary base01, highlights base02 */
:root[data-theme="solarized-light"], [data-theme-preview="solarized-light"] {
  --c-bg: #fdf6e3;
  --c-surface: #fdf6e3;
  --c-surface-2: #eee8d5;
  --c-surface-3: #eee8d5;
  --c-text: #657b83;
  --c-text-muted: #93a1a1;
  --c-text-faint: #93a1a1;
  --c-line: color-mix(in srgb, #93a1a1 42%, #eee8d5);
  --c-line-strong: #93a1a1;
  --c-accent: #268bd2;
  --c-accent-2: #268bd2;
  --c-accent-soft: #eee8d5;
  --c-on-accent: #fdf6e3;
  --c-bar: #073642;
  --c-on-bar: #eee8d5;
  --c-sel: #268bd2;
  --c-sel-soft: #eee8d5;
  --c-on-sel: #fdf6e3;
  --c-focus: color-mix(in srgb, #268bd2 30%, transparent);
  --c-input: #fdf6e3;
  --c-input-line: #93a1a1;
  --c-input-on: #eee8d5;
  --c-ok: #859900;
  --c-ok-soft: color-mix(in srgb, #859900 14%, #fdf6e3);
  --c-warn: #cb4b16;
  --c-warn-soft: color-mix(in srgb, #cb4b16 11%, #fdf6e3);
  --c-danger: #dc322f;
  --c-danger-soft: color-mix(in srgb, #dc322f 11%, #fdf6e3);
  --c-on-status: #fdf6e3;
  --c-mark: #b58900;
  --c-on-mark: #fdf6e3;
  --c-scroll: #93a1a1;
  --c-scroll-on: #657b83;
  --c-scroll-end: #eee8d5;
  --c-scrim: color-mix(in srgb, #002b36 30%, transparent);
  --c-shadow: none;
  --c-shadow-l: 0 0 14px color-mix(in srgb, #002b36 14%, transparent);
  --c-focus-ring: #268bd2;
  --ux-banner-info: #eee8d5;
  --ux-banner-warn: color-mix(in srgb, #b58900 13%, #fdf6e3);
  --ux-banner-error: color-mix(in srgb, #dc322f 11%, #fdf6e3);
  color-scheme: light;
}
:root[data-theme="solarized-dark"], [data-theme-preview="solarized-dark"] {
  --c-bg: #002b36;
  --c-surface: #002b36;
  --c-surface-2: #073642;
  --c-surface-3: #073642;
  --c-text: #839496;
  --c-text-muted: #586e75;
  --c-text-faint: #586e75;
  --c-line: #073642;
  --c-line-strong: #586e75;
  --c-accent: #268bd2;
  --c-accent-2: #268bd2;
  --c-accent-soft: #073642;
  --c-on-accent: #fdf6e3;
  --c-bar: #073642;
  --c-on-bar: #93a1a1;
  --c-sel: #268bd2;
  --c-sel-soft: #073642;
  --c-on-sel: #fdf6e3;
  --c-focus: color-mix(in srgb, #268bd2 40%, transparent);
  --c-input: #002b36;
  --c-input-line: #586e75;
  --c-input-on: #073642;
  --c-ok: #859900;
  --c-ok-soft: color-mix(in srgb, #859900 18%, #002b36);
  --c-warn: #cb4b16;
  --c-warn-soft: color-mix(in srgb, #cb4b16 18%, #002b36);
  --c-danger: #dc322f;
  --c-danger-soft: color-mix(in srgb, #dc322f 18%, #002b36);
  --c-on-status: #fdf6e3;
  --c-mark: #b58900;
  --c-on-mark: #002b36;
  --c-scroll: #586e75;
  --c-scroll-on: #839496;
  --c-scroll-end: #073642;
  --c-scrim: color-mix(in srgb, #002b36 60%, transparent);
  --c-shadow: none;
  --c-shadow-l: 0 0 16px rgba(0, 0, 0, .45);
  --c-focus-ring: #268bd2;
  --ux-banner-info: #073642;
  --ux-banner-warn: color-mix(in srgb, #b58900 18%, #002b36);
  --ux-banner-error: color-mix(in srgb, #dc322f 18%, #002b36);
  color-scheme: dark;
}