/* OhSnap tokens. Used by the admin layer only; the stage is neutral. 0.9:
   the brand fonts are bundled (fonts/README.md), the drawer has a dark
   theme (body[data-admin-theme="dark"], ui.admin_theme) and every surface
   colour is a token so both themes come from this one file. */
@font-face { font-family: "Nunito"; src: url(../fonts/nunito.woff2) format("woff2"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "Bangers"; src: url(../fonts/bangers.woff2) format("woff2"); font-display: block; }

:root {
  --white: #FFFFFF;
  --paper: #F6F7FB;
  --paper-2: #EEF0FA;
  --ink: #1B1F3B;
  --ink-2: #4A4F6E;
  --ink-3: #8A8FAE;
  --line: #DEE1F1;
  --outline: #14162B;
  --blue: #4B5CE4;
  --blue-deep: #3543B8;
  --blue-soft: #E4E7FC;
  --blue-rgb: 75, 92, 228;
  --yellow: #FFE14D;
  --yellow-light: #FFF0A3;
  --yellow-deep: #F5C400;
  --danger: #E4485B;
  --ok: #2FA36B;
  --ok-soft: #E3F5EB;
  --danger-soft: #FBE3E7;
  --surface: #FFFFFF;
  --surface-2: var(--paper);
  --log-bg: #14162B;
  --log-fg: #DDE1F5;
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Bangers", Impact, "Arial Black", sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --r: 12px;
  --ease: cubic-bezier(.2, .9, .3, 1);
  --shadow: 0 18px 50px -24px rgba(27, 31, 59, .45);
  --shadow-card: 0 1px 2px rgba(27, 31, 59, .04), 0 10px 28px -20px rgba(27, 31, 59, .35);
  --shadow-blue: 0 10px 26px -12px rgba(var(--blue-rgb), .65);
  --grad-head: #4B5CE4;
  --grad-primary: #4B5CE4;
  --grad-warn: #FFE14D;
  --grad-danger: #E4485B;
  /* 0.10 comic surfaces: solid fills, ink outlines and hard offset
     shadows, like a printed panel. No translucency, no glow. The halftone
     texture sits under the drawer at --tex-opacity. */
  --ink-line: #14162B;
  --pop: 3px 3px 0 #14162B;
  --pop-lg: 6px 6px 0 #14162B;
  --tex-filter: invert(1) hue-rotate(180deg);
  --tex-opacity: .16;
  --amb-opacity: .14;
  --tex-blend: multiply;
  --scroll-track: #FFFFFF;
  --scroll-thumb: #4B5CE4;
  --scroll-hover: #FFE14D;
}

body[data-admin-theme="dark"] {
  --paper: #161A36;
  --paper-2: #1E2347;
  --ink: #EEF0FA;
  --ink-2: #C3C7E3;
  --ink-3: #8A90B8;
  --line: #2C3263;
  --blue-deep: #B7BEFF;
  --blue-soft: #262D6B;
  --yellow-deep: #FFE14D;
  --ok-soft: #173A2B;
  --danger-soft: #4A1F28;
  --surface: #1B2044;
  --surface-2: #232958;
  --log-bg: #0E1128;
  --shadow: 0 18px 50px -24px rgba(0, 0, 0, .8);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -20px rgba(0, 0, 0, .7);
  --ink-line: #000000;
  --pop: 3px 3px 0 #000000;
  --pop-lg: 6px 6px 0 #000000;
  --tex-filter: none;
  --tex-opacity: .4;
  --amb-opacity: .35;
  --tex-blend: screen;
  --scroll-track: #000000;
  --scroll-thumb: #4B5CE4;
  --scroll-hover: #FFE14D;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000; font-family: var(--font);
  -webkit-user-select: none; user-select: none;
}
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* Scrollbars (0.10, the owner's rule): no grey anywhere. A black track in
   the dark theme, white in the light one, a solid blue thumb that turns
   yellow under the pointer. The stage never scrolls; this is the drawer,
   the logs and the lists. */
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--scroll-track); }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--scroll-hover); }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: var(--scroll-thumb) var(--scroll-track); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}