/* neonatica design system: "paper bento".
   Cream halftone paper, flat colour, thick ink outlines, hard shadows, serif accents.
   This file is shared verbatim between the neonatica projects. Put project-specific styling in the project's own stylesheet. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url(fonts/abril-fatface.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Per-project accents: --accent is the project colour, --accent-2 its partner. Gather is violet + lime. */
  --accent: #a78bfa; --accent-2: #b8f35a; --accent-text: #17131f;
  --bg: #f6efdc; --surface: #fffdf6; --surface-2: #efe6d0; --text: #17131f; --muted: #5d5668;
  --line: #17131f;          /* strong outline and hard-shadow colour */
  --border: #d8ccae;        /* hairlines */
  --accent-soft: #e6dcff; --danger: #c4264a; --ok: #1d7d4d; --warn: #d99a1d;
  --dots: #17131f1c; --shadow-c: #17131f;
  --outline: 2.5px solid var(--line);
  --shadow: 0 4px 0 var(--shadow-c);
  --radius: 16px; --gap: 8px;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --serif: "Abril Fatface", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17131f; --surface: #221c2e; --surface-2: #2d2540; --text: #f6efdc; --muted: #a79fb4;
    --line: #f6efdc; --border: #3b3350; --accent-soft: #3a2f5c; --danger: #ff7a95; --ok: #5ce39a;
    --dots: #f6efdc14; --shadow-c: #000; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17131f; --surface: #221c2e; --surface-2: #2d2540; --text: #f6efdc; --muted: #a79fb4;
  --line: #f6efdc; --border: #3b3350; --accent-soft: #3a2f5c; --danger: #ff7a95; --ok: #5ce39a;
  --dots: #f6efdc14; --shadow-c: #000; color-scheme: dark;
}

/* Paper */
.nx-paper { background: var(--bg) radial-gradient(var(--dots) 1px, transparent 1.6px) 0 0 / 9px 9px; }

/* Components (opt in with the nx- prefix) */
.nx-window { background: var(--surface); border: var(--outline); border-radius: 24px; box-shadow: 0 6px 0 var(--shadow-c); overflow: hidden; }
.nx-window > .nx-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--accent-2); color: #17131f; border-bottom: var(--outline); font: 500 13px var(--mono); }
.nx-tape { position: relative; }
.nx-tape::before { content: ""; position: absolute; top: -13px; left: 46%; width: 92px; height: 24px; background: var(--accent); opacity: .75; transform: rotate(-4deg); border-radius: 3px; z-index: 2; pointer-events: none; }
.nx-stamp { display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--accent-2); color: #17131f; font: 400 22px/1 var(--serif); outline: 2px dashed #17131f; outline-offset: -9px; border: 2.5px solid #17131f; box-shadow: 0 5px 0 #17131f; transform: rotate(-12deg); }
.nx-highlight { display: inline-block; background: var(--surface); color: var(--text); font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; border: var(--outline); border-radius: 20px; padding: 0 .2em; box-shadow: 0 6px 0 var(--shadow-c); transform: rotate(-1.5deg); }