/* CuperOS docs shell */
:root {
  color-scheme: light;
  --desktop-bg: oklch(0.45 0.10 195);
  --desktop-dot: oklch(0.50 0.12 195);
  --window-chrome: oklch(0.85 0.005 250);
  --window-body: oklch(0.97 0.002 90);
  --button-face: oklch(0.85 0.005 250);
  --button-hover: oklch(0.88 0.005 250);
  --inset-dark: oklch(0.40 0.005 250);
  --inset-light: oklch(0.95 0.003 90);
  --title-bar: oklch(0.40 0.15 260);
  --title-bar-end: oklch(0.45 0.15 260);
  --text-dark: oklch(0.15 0.005 250);
  --text-soft: oklch(0.33 0.006 250);
  --text-light: oklch(0.95 0.003 90);
  --link-color: oklch(0.40 0.15 260);
  --link-hover: oklch(0.50 0.18 260);
  --accent-cyan: oklch(0.50 0.10 195);
  --accent-gold: oklch(0.82 0.15 88);
  --accent-green: oklch(0.70 0.20 130);
  --danger-red: oklch(0.58 0.19 28);
  --shadow: 2px 2px 0 oklch(0.08 0.004 250);
  --max: 1180px;
  font-family: "Pixelify Sans", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--desktop-bg);
  background-image: radial-gradient(circle, var(--desktop-dot) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--text-dark);
  font-family: "Pixelify Sans", monospace;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 54px;
}

a {
  color: var(--link-color);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

code,
pre,
.mono {
  font-family: "IBM Plex Mono", "Courier New", monospace;
}

button,
a {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}