/* Dim skin (phylobot.skins): a low-contrast dark for long sessions and lit rooms, where
   near-white on near-black glares. Builds on Clean's layout and Dark's remapping of
   figure and table colours (clean.css and dark.css both apply to it); loaded after them,
   so these tokens win. Neutral charcoal with no blue cast, soft grey text (8:1, never
   white), one muted sage accent; IBM Plex Sans for text and IBM Plex Mono for code
   (static/phylobot/fonts). Muted text stays above 4.5:1 on the cards. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root[data-skin="dim"] {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --page: #22262b;
  --bg: #2b3036;            /* cards */
  --bar: #1c1f23;
  --fg: #c9cfd5;            /* 8.4:1 on the cards */
  --fg-2: #b2b9c0;
  --muted: #959ea7;         /* 4.8:1 */
  --line: #363c43;
  --edge: #424951;
  --accent: #9cc3a6;        /* sage, 6.6:1 */
  --accent-hover: #b2d3ba;
  --accent-soft: rgba(156, 195, 166, .12);
  --accent-ring: rgba(156, 195, 166, .3);
  --on-accent: #17241b;
  --link-line: rgba(156, 195, 166, .4);
  --title-rim: transparent;
  --title-shadow: transparent;
  --subtle: #31363d;
  --hover: #33393f;
  --hover-edge: #59616a;
  --row-hover: #30353b;
  --glass: rgba(255, 255, 255, .05);
  --track: #3a4047;
  --shadow: 0 1px 2px rgba(0, 0, 0, .18);
  --viz-grid: #3a4047;
  --neutral-bg: #383e45; --neutral-fg: #b2b9c0;
  --running-bg: rgba(139, 172, 214, .16); --running-fg: #a9c3e3;
  --ok-bg: rgba(126, 196, 150, .15); --ok-fg: #9fd5b0;
  --bad-bg: rgba(226, 125, 113, .15); --bad-fg: #eaa49b;
  --danger: #e59a90;
  --warn-fg: #dcb57a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23959ea7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --work-align: #8fa9c4; --work-modelfinder: #b7c9a0; --work-trees: #9cc3a6;
  --work-ancestors: #d2a878; --work-codeml: #c9b28f; --work-setup: #5d646c;

  & body { font-family: var(--font); font-size: 15px; letter-spacing: .003em; }
  & :is(input, select, button, a.button) { font-family: inherit; }
  & :is(code, pre, textarea) { font-family: var(--mono); }
  & ::selection { background: rgba(156, 195, 166, .32); color: #e4e8ec; }
  & h1, & h2 { font-weight: 600; letter-spacing: -.01em; }
  & header .brand { color: var(--fg); font-weight: 600; }
  & header nav :is(a[aria-current="page"], summary.current) { color: var(--accent); }
  & .stage-graph .stage.running .box { fill: var(--accent-soft); stroke: var(--accent); }
  & .stage-graph .stage.running :is(.state, .dot) { fill: var(--accent); }

  /* Home: a quiet title, the "2" drawn as an outline in sage: a lamp turned down. */
  & .title-page h1 { color: var(--fg); }
  & .title-page h1 .two { color: transparent; -webkit-text-stroke: .045em var(--accent); text-shadow: none; }
  & .title-page .logo { filter: drop-shadow(0 0 1px rgba(201, 207, 213, .9)) drop-shadow(0 0 1px rgba(201, 207, 213, .5)); }
}