/* NIOS site — design tokens and base styles. The palette is the OS's own
 * (libgui/theme.h, nui.c, wm.c): warm sunset glass by day, the F12
 * diagnostics screen by night. */
@font-face { font-family: "NIOS Inter"; src: url("../../video/assets/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NIOS Inter"; src: url("../../video/assets/fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "NIOS Inter"; src: url("../../video/assets/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "NIOS Inter"; src: url("../../video/assets/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "NIOS Mono"; src: url("../../video/assets/fonts/NotoSansMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* the OS theme */
  --accent: #2f7cf6; --accent-hot: #4a8eff; --accent-dark: #1f5fd0; --accent-soft: #e3eefe;
  --text: #1c1c1e; --text2: #5b5f68; --text3: #8e8c8a;
  --win: #f7f7f9; --surface: #ffffff; --border: #e2e3e8; --divider: #e6e7eb;
  --ok: #22a861; --danger: #e5484d; --warn: #f5a623;
  --sky-top: #8ea6d6; --sky-bot: #f4b88e; --haze: #fff1e8;
  --glass: rgba(250, 248, 246, .78); --glass-edge: rgba(255, 255, 255, .6);
  /* the night (F12 diagnostics) */
  --night: #0e1422; --night2: #18223a; --night-card: rgba(22, 27, 38, .82); --night-edge: rgba(107, 162, 255, .26);
  --n-text: #e6e9ee; --n-dim: #8a919e; --n-acc: #6ba2ff; --n-ok: #46c07a;
  /* NUI named palette */
  --c-blue: #2f7cf6; --c-green: #22a861; --c-yellow: #f2b81c; --c-orange: #f28a1e; --c-red: #e5484d;
  --c-pink: #e8508c; --c-purple: #8b5cf6; --c-teal: #14b8a6; --c-gray: #6b7280;
  /* type */
  --ui: "NIOS Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "NIOS Mono", "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow-1: 0 6px 28px rgba(60, 30, 20, .16);
  --shadow-2: 0 18px 60px rgba(60, 30, 20, .24);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--ui); font-size: 17px; line-height: 1.55; color: var(--text);
  background: #f6efe9; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code, kbd, pre, .mono { font-family: var(--mono); }
code { font-size: .92em; }
kbd { display: inline-block; min-width: 1.6em; padding: .05em .45em; border-radius: 6px; font-size: .85em; text-align: center;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 0 rgba(0, 0, 0, .12); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* glyph masks (assets/glyphs/*.png) tinted with currentColor */
.nios-glyph { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }