/* The tokens: every color, size, weight and duration the UI uses, on :root. The other sheets use them and
   never a literal. (styles/: one sheet per area, linked in order by index.html and gallery.html.) */
/* Image Lab: a dark document window in the manner of a Mac app. Toolbar on top; under it the tree of steps
   (navigation), the canvas (content) and the inspector (the selected step's settings and actions).

   One look per role, high contrast (it must read on a laptop outdoors):
   data      white tabular numbers            label    light gray (a setting's name)
   detail    dim gray (a trait, a note, what a setting does now: "Moved 20 px")
   title     bold light gray (a setting's or a group's: Model, Seed, Post-processing)
   group     settings that belong together: one recessed box of rows (label left, its control or value right)
   input     recessed, bordered               button   raised: lighter than its surface; important actions solid blue
   link      blue text                        choice   rows in one recessed group; each row states what it gives
   Panes are separated by black edges, sections by a visible line; nothing relies on faint hairlines. */
:root {
  --canvas: #111111;
  --toolbar: #2b2b2b;
  --sidebar: #262626;
  --pane: #232323;
  --edge: #050505; /* between panes */
  --line: #3a3a3a; /* between sections */
  --group: #181818; /* recessed: lists, inputs */
  --group-line: #303030; /* between rows of a group */
  --group-border: #464646;
  --row-on: #1b3a66;
  --raised: #4a4a4a;
  --raised-hover: #595959;
  --raised-on: #676767;
  --pop: #2e2e2e;
  --text: #f4f4f4;
  --label: #c4c4c4;
  --dim: #8f8f8f;
  --accent: #0a84ff;
  --accent-hover: #3a9bff;
  --link: #6cb4ff;
  --ok: #3fd164;
  --warn: #ffb340;
  --error: #ff6961;
  /* type: one size and one weight for everything read; roles differ by color (white, gray, dim), never by a size or
     weight a little apart. Sizes: text (all of it), title (the panel's step), tiny (under thumbnails, slider marks,
     key caps), big (the start screen's list). Weights: text (all of it), button (what has its own background or is a
     link: buttons, the project's name, links), title (the step's, and every title of a setting or a group). */
  --fs-title: 16px;
  --fs-text: 13px;
  --fs-tiny: 11px;
  --fs-big: 14px;
  --fw-text: 500;
  --fw-button: 600;
  --fw-title: 700;
  --r: 6px; /* a raised thing's corners (a button) */
  --r-box: 8px; /* a recessed thing's corners: every box and field (controls.css) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* hover, by what a thing is made of (CLAUDE.md, "Hover and motion"): a raised thing brightens its fill (--raised-hover,
     --accent-hover, --danger-hover, --pressed-hover); a flat button gets a tint (--flat-hover); a recessed box brightens
     its border (--field-hover); a row that can be pressed tints (--row-hover); a text-only control brightens its text
     (--text); an item of a popup menu fills blue (the system's convention); a tree node rings (the tree's own) */
  --flat-hover: rgba(255, 255, 255, 0.1);
  --row-hover: rgba(255, 255, 255, 0.08);
  /* motion: three durations. A state change (hover, press, on and off, a small thing appearing); an overlay fading;
     something moving or changing size. Nothing else; reduced motion turns them all off. */
  --t-state: 0.12s;
  --t-fade: 0.18s;
  --t-move: 0.3s;
  color-scheme: dark;
  /* drawn on canvases (viewer.js, tab.js): tile badges, the compare split, labels over the image, the tab icon */
  --tile-pending: #5e5e5e;
  --tile-running: #5c93ff;
  --tile-done: #45c35a;
  --tile-blending: #1f6b2c;
  --tile-flagged: #ffb547;
  --tile-error: #ff6b61;
  --tile-discarded: #000000; /* marked to be made again: dark, off */
  --seam: #00ffff;
  --image-label: rgba(0, 0, 0, 0.5);
  --image-label-current: #6cb4ff; /* the selected step's name over the image: the link blue, readable on its backing */
  --area-shade: rgba(0, 0, 0, 0.45);
  --area-box: rgba(
    255,
    255,
    255,
    0.5
  ); /* the box an edit region sends: the region and its context */ /* the image outside an area edit's area */
  --tab-track: #3d3d3d;
  /* every other color the UI uses (grays are neutral: no hue; blues are the accent and its highlights) */
  --corner: #565656;
  --danger: #d9352c;
  --danger-hover: #e8453c;
  --danger-light: #ff8a82;
  --danger-text: #ff6b61;
  --dash: #868686;
  --draft-line: #787878;
  --drop-bg: #13243a;
  --error-bg: #3a1716;
  --field-hover: #6d6d6d;
  --link-line: #575757; /* inactive tree links: a third fainter than they were against the sidebar */
  --link-path: #d4d4d4;
  --login-border: #3e3e3e;
  --node-hover: #9b9b9b;
  --off-text: #767676;
  --on-accent-detail: #d8e5f7;
  --on-accent-label: #e6f0ff;
  --peek-line: #575757;
  --home-mark: #2e2e2e;
  --kbd-border: #6a6a6a;
  --slider-track: #050505; /* recessed in its group */
  --slider-tick: #5a5a5a;
  --slider-major: #9a9a9a;
  --slider-thumb: #d6d6d6; /* raised, light: easy to find */
  --slider-thumb-hover: #f4f4f4; /* the start screen's mark: faint on the canvas */
  --pop-border: #4a4a4a;
  --pressed: #e4e4e4;
  --pressed-hover: #f2f2f2;
  --pressed-text: #141414;
  --running-text: #8cc4ff;
  --sep: #484848;
  --switch-off: #5b5b5b;
  --thumb-none: #2c2c2c;
  --accent-00: rgba(10, 132, 255, 0);
  --accent-08: rgba(10, 132, 255, 0.08);
  --accent-12: rgba(10, 132, 255, 0.12);
  --accent-32: rgba(10, 132, 255, 0.32);
  --accent-35: rgba(10, 132, 255, 0.35);
  --accent-90: rgba(10, 132, 255, 0.9);
  --black: #000000;
  /* everything that floats (menus, dropdowns, popovers, dialogs, toasts): a close shadow and a very wide soft one */
  --shadow-float: 0 10px 28px var(--black-50), 0 30px 140px var(--black-45);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-42: rgba(0, 0, 0, 0.42);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-74: rgba(0, 0, 0, 0.74);
  --black-78: rgba(0, 0, 0, 0.78);
  --white: #ffffff;
  --white-03: rgba(255, 255, 255, 0.03);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-09: rgba(255, 255, 255, 0.09);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-18: rgba(255, 255, 255, 0.18);
}