/* Engram's own pages in the person's theme (docs/command-center.md, decision 0323).

   Colour and font only. Every page keeps its Tailwind classes, so where things
   sit and how big they are cannot change with the theme (Jasper, 2026-10-18:
   "keep the spacing exactly as the current Engram design"). What changes is
   what the colour classes MEAN: Tailwind's neutral greys, its blue accent and
   white are compiled to these variables (src/pagecss.ts, public/theme.js),
   and each theme is one set of values for them. Neuron is Tailwind's own
   values, so it is today's Engram to the pixel.

   Set on <html>: data-theme="synapse|cortex|axon|neuron" (public/theme.js).
   Status colours (red, amber, emerald, green) are not themed: they mean the
   same everywhere.

   Fonts: the system's, as Engram always had, in every theme but Axon. Inter
   (Synapse's and Cortex's font on the Command Center) runs about 8% wider,
   which would widen every box that is as wide as its text; Axon's condensed
   face only ever narrows one. Measured 2026-10-18, see decision 0323. */
/* Axon's font, vendored (public/fonts/LICENSE.txt); fetched only when Axon is
   the theme. Same files as tokens.css. */
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-condensed-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-condensed-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-condensed-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root, [data-theme="neuron"] {
  --n-50: 250 250 250;
  --n-100: 245 245 245;
  --n-200: 229 229 229;
  --n-300: 212 212 212;
  --n-400: 163 163 163;
  --n-500: 115 115 115;
  --n-600: 82 82 82;
  --n-700: 64 64 64;
  --n-800: 38 38 38;
  --n-900: 23 23 23;
  --n-950: 10 10 10;
  --a-50: 239 246 255;
  --a-100: 219 234 254;
  --a-200: 191 219 254;
  --a-300: 147 197 253;
  --a-400: 96 165 250;
  --a-500: 59 130 246;
  --a-600: 37 99 235;
  --a-700: 29 78 216;
  --a-800: 30 64 175;
  --a-900: 30 58 138;
  --a-950: 23 37 84;
  --c-white: 255 255 255;
  --font-ui: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
[data-theme="synapse"] {
  --n-50: 243 246 253;
  --n-100: 232 237 248;
  --n-200: 211 219 236;
  --n-300: 179 191 216;
  --n-400: 133 146 174;
  --n-500: 93 106 136;
  --n-600: 67 78 105;
  --n-700: 46 55 80;
  --n-800: 26 34 54;
  --n-900: 14 20 36;
  --n-950: 5 7 13;
  --a-50: 236 253 255;
  --a-100: 207 249 255;
  --a-200: 165 242 255;
  --a-300: 103 232 251;
  --a-400: 54 226 255;
  --a-500: 6 195 230;
  --a-600: 0 152 184;
  --a-700: 8 121 148;
  --a-800: 14 97 120;
  --a-900: 18 80 101;
  --a-950: 5 52 69;
  --c-white: 255 255 255;
  --font-ui: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
[data-theme="cortex"] {
  --n-50: 245 242 234;
  --n-100: 239 234 223;
  --n-200: 221 213 196;
  --n-300: 201 191 170;
  --n-400: 154 145 127;
  --n-500: 122 114 95;
  --n-600: 95 88 75;
  --n-700: 74 68 56;
  --n-800: 41 37 28;
  --n-900: 31 28 21;
  --n-950: 23 21 15;
  --a-50: 255 244 238;
  --a-100: 255 228 213;
  --a-200: 255 198 168;
  --a-300: 255 159 114;
  --a-400: 255 122 69;
  --a-500: 242 96 31;
  --a-600: 224 83 31;
  --a-700: 184 63 20;
  --a-800: 147 52 22;
  --a-900: 119 45 21;
  --a-950: 64 20 8;
  --c-white: 251 249 244;
  --font-ui: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
[data-theme="axon"] {
  --n-50: 246 245 240;
  --n-100: 236 235 228;
  --n-200: 201 198 186;
  --n-300: 169 167 154;
  --n-400: 141 140 128;
  --n-500: 92 92 82;
  --n-600: 74 74 66;
  --n-700: 47 50 46;
  --n-800: 29 32 28;
  --n-900: 17 19 17;
  --n-950: 10 11 10;
  --a-50: 255 251 235;
  --a-100: 255 241 198;
  --a-200: 255 224 136;
  --a-300: 255 203 74;
  --a-400: 255 176 0;
  --a-500: 240 148 0;
  --a-600: 194 122 0;
  --a-700: 154 90 2;
  --a-800: 127 71 11;
  --a-900: 108 59 15;
  --a-950: 63 30 3;
  --c-white: 251 250 246;
  --font-ui: 'IBM Plex Sans Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Scrollbars in the theme (Jasper, 2026-10-19: "make the scrollbar everywhere
   fit all themes"). The same rules are in tokens.css, for the pages that link
   that sheet instead; only the two colours differ, taken here from the theme's
   greys, so a custom theme's greys reach its scrollbars too. Thin and rounded,
   on a transparent track. ::-webkit-scrollbar for Chromium and Safari (an
   element's own scrollbar-width or scrollbar-color would switch it off there,
   so no page sets those), the standard properties where it does not exist
   (Firefox). Only with a mouse or trackpad: a phone keeps its own overlay
   scrollbar, which takes no width and shows only while it scrolls. */
:root { --scrollbar-thumb: rgb(var(--n-400) / .75); --scrollbar-thumb-hover: rgb(var(--n-500)); }
:root[data-mode="dark"], :root.dark { --scrollbar-thumb: rgb(var(--n-500) / .8); --scrollbar-thumb-hover: rgb(var(--n-400)); }
:root.light { --scrollbar-thumb: rgb(var(--n-400) / .75); --scrollbar-thumb-hover: rgb(var(--n-500)); }
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border: 2px solid transparent;
    background-clip: padding-box; border-radius: 999px; min-height: 24px; min-width: 24px; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
  }
}