/* Manthryx OS: base tokens, type, reset, focus, CRT layer.

   Design plan (frontend-design pass):
   - Colour: the chrome is neutral silver to match the icons' greys. The ONE
     colour statement is the title bar, which borrows the wallpaper's own sky
     (deep ultramarine at the top to bright sky blue), so windows feel
     like part of the scene rather than a copy of a real OS. True black
     bevel edges, not tinted near-black.
     --chrome #c5c5c5 · --light #ffffff · --mid #e3e3e3 · --shade #808080
     --ink #000000 · --sky-deep #0a1fd6 · --sky #1d8cf2 · --manila #f2b84b
   - Type: Pixelify Sans for all chrome (titles, menus, buttons, captions);
     VT323 only inside Notepad, where a bitmap terminal face is the point.
     Scale: 15 / 16 / 18 / 24 / 32 px. Weights 400 and 600 only.
   - Layout: icons in a left column on the wallpaper; windows float.
     Content is left-aligned everywhere, as on a real desktop.
   - Principles: the boldness lives in the living desktop (drifting sky,
     icons that open and lift). The chrome stays quiet, square, and
     consistent: one bevel system, no rounded corners, no soft shadows. */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;600&family=VT323&display=swap');

:root {
  --chrome: #c5c5c5;
  --light: #ffffff;
  --mid: #e3e3e3;
  --shade: #808080;
  --ink: #000000;
  --sky-deep: #0a1fd6;
  --sky: #1d8cf2;
  --manila: #f2b84b;
  --select: #0a1fd6;
  --paper: #ffffff;
  --muted-ink: #3d3d3d;

  --font-ui: 'Pixelify Sans', ui-monospace, monospace;
  --font-doc: 'VT323', ui-monospace, monospace;
  --fs-xs: 15px;
  --fs-s: 16px;
  --fs-m: 18px;
  --fs-l: 24px;
  --fs-xl: 32px;

  --taskbar-h: 40px;

  /* bevels: outer raised / sunken, as layered inset shadows */
  --raised: inset -1px -1px var(--ink), inset 1px 1px var(--light), inset -2px -2px var(--shade), inset 2px 2px var(--mid);
  --sunken: inset -1px -1px var(--light), inset 1px 1px var(--shade), inset -2px -2px var(--mid), inset 2px 2px var(--ink);
  --pressed: inset 1px 1px var(--ink), inset -1px -1px var(--light), inset 2px 2px var(--shade);
  --field: inset -1px -1px var(--light), inset 1px 1px var(--shade), inset -2px -2px var(--mid), inset 2px 2px var(--ink);

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: var(--fs-s)/1.35 var(--font-ui);
  color: var(--ink);
  background: var(--sky-deep);
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
img { image-rendering: pixelated; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--sky-deep); }

/* 90s focus: dotted outline, always visible for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: -4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }

/* CRT layer: scanlines + soft vignette over everything, never interactive */
.crt {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / .09) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / .28) 100%);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}