/* Neofoundry design tokens, copied into NeoOS so nothing links out to ~/.claude.
   Source of truth: ~/.claude/skills/neofoundry-design/tokens/*.css
   Palette is v4 — arc cyan on violet-cast black. */


:root {
  /* ---- brand core: five colours, each with one job ---- */
  --nf-void: #0A0912;        /* the field */
  --nf-bone: #EDEAE4;        /* letterforms and light surfaces */
  --nf-arc: #12E8FF;         /* accent — structure only */
  --nf-core: #FFD08A;        /* impact flash, two frames */
  --nf-neon: #FF2E7E;        /* UI + loading only, never in the logo */

  /* ---- neutrals, derived off void ---- */
  --nf-ink-800: #12101B;
  --nf-ink-700: #2A2734;     /* ghost numerals */
  --nf-ink-600: #3C3947;
  --nf-grey-500: #6F6B76;
  --nf-grey-400: #8A8691;
  --nf-grey-300: #A8A4AE;
  --nf-grey-200: #C3BFCB;

  /* ---- alpha rules and washes ---- */
  --hair: #ffffff14;
  --hair-strong: #ffffff2e;
  --hair-faint: #ffffff08;
  --arc-wash: #12E8FF0a;
  --arc-edge: #12E8FF59;
  --neon-wash: #FF2E7E1a;

  /* ---- type: three families, one job each ---- */
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- motion: two speeds, colour and border only ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 120ms;
  --slow: 420ms;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--nf-void);
  color: var(--nf-bone);
  font: 400 14px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ---- the field. never a flat solid. ---- */
.nf-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nf-field .grid {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, var(--hair-faint) 0 1px, transparent 1px calc(100% / 12));
}
.nf-field .glow-a {
  position: absolute; top: -22vh; right: -14vw; width: 62vw; height: 62vh;
  background: radial-gradient(circle, #12E8FF20, transparent 68%); filter: blur(90px);
}
.nf-field .glow-b {
  position: absolute; bottom: -26vh; left: -16vw; width: 54vw; height: 54vh;
  background: radial-gradient(circle, #FF2E7E12, transparent 68%); filter: blur(100px);
}
.nf-field .scan {
  position: absolute; top: 0; bottom: 0; width: 34vw;
  background: linear-gradient(90deg, transparent, #12E8FF08 46%, #12E8FF12 50%, #12E8FF08 54%, transparent);
  animation: nf-scan 20s linear infinite;
}
@keyframes nf-scan { from { transform: translateX(-40vw); } to { transform: translateX(140vw); } }
/* vignette: light falls off toward the edges, so the centre reads lifted. not a shadow. */
.nf-field .vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 105% at 50% 42%, transparent 42%, #0A0912cc 100%);
}

/* ---- the shear: hairline / 4px arc bar / hairline slid 17% right ---- */
.nf-shear { position: relative; height: 6px; width: 100%; }
.nf-shear i { position: absolute; left: 0; right: 0; height: 1px; background: var(--hair); }
.nf-shear i:nth-child(1) { top: 0; }
.nf-shear i:nth-child(3) { bottom: 0; left: 17%; right: -17%; }
.nf-shear b { position: absolute; top: 1px; left: 0; width: 74px; height: 4px; background: var(--nf-arc); }

/* ---- markers: everything that would be an icon is a rule, a bar, or a dot ---- */
.nf-tick { display: block; width: 34px; height: 3px; background: var(--nf-arc); }
.nf-marker { display: inline-block; width: 12px; height: 2px; background: var(--nf-arc); vertical-align: middle; }
.nf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; } /* the only pill */

/* ---- type roles ---- */
.nf-eyebrow {
  font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--nf-grey-500);
}
.nf-h {
  font: 700 clamp(18px, 2.4vw, 26px)/1.04 var(--display);
  letter-spacing: .04em; text-transform: uppercase; margin: 0;
}
.nf-label {
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--nf-grey-400);
}
.nf-num {
  font: 400 11px/1 var(--mono); letter-spacing: .12em; color: var(--nf-grey-500);
}

/* ---- cards: hairline box, square corners, no shadow, rule under the head ---- */
.nf-card {
  position: relative; border: 1px solid var(--hair); border-radius: 2px;
  background: #12101B66; overflow: hidden;
}
.nf-card.featured { border-color: var(--arc-edge); background: var(--arc-wash); }
.nf-card > .head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--hair);
}
.nf-card > .body { padding: 16px 18px; }

/* ghost numerals — the token exists for exactly this */
.nf-ghost {
  position: absolute; right: 12px; top: -18px; z-index: 0; pointer-events: none;
  font: 700 92px/1 var(--display); color: var(--nf-ink-700); letter-spacing: .02em;
}

/* ---- border beam: a cyan hairline with a clock on it ---- */
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nf-beam { position: relative; }
.nf-beam::before {
  content: ''; position: absolute; inset: -1px; border-radius: 2px; z-index: -1;
  background: conic-gradient(from var(--beam), transparent 0deg, var(--nf-arc) 26deg, transparent 62deg, transparent 360deg);
  animation: nf-run 3.4s linear infinite;
}
@keyframes nf-run { to { --beam: 360deg; } }

/* ---- buttons: 2px radius ceiling, colour and border only, no scale ---- */
.nf-btn {
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  background: none; border: 1px solid var(--hair); border-radius: 2px;
  color: var(--nf-grey-300); padding: 9px 13px; cursor: pointer;
  transition: color var(--slow) var(--ease), border-color var(--slow) var(--ease), background var(--slow) var(--ease);
}
.nf-btn:hover { color: var(--nf-arc); border-color: var(--arc-edge); background: var(--arc-wash); }
.nf-btn.accent { background: var(--nf-arc); border-color: var(--nf-arc); color: var(--nf-void); }
.nf-btn.accent:hover { background: var(--nf-bone); border-color: var(--nf-bone); color: var(--nf-void); }
.nf-btn.ink:hover { color: var(--nf-neon); border-color: #FF2E7E59; background: var(--neon-wash); }
.nf-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ---- inputs ---- */
.nf-input {
  width: 100%; background: var(--nf-void); border: 1px solid var(--hair); border-radius: 2px;
  color: var(--nf-bone); padding: 10px 13px; font: 400 13px/1.4 var(--body); outline: none;
  transition: border-color var(--slow) var(--ease);
}
.nf-input:focus { border-color: var(--arc-edge); }
.nf-input::placeholder { color: var(--nf-grey-500); }

/* ---- rows separated by hairlines, not gaps ---- */
.nf-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--hair); text-decoration: none; color: inherit;
  transition: background var(--slow) var(--ease);
}
.nf-row:first-child { border-top: 0; }
.nf-row:hover { background: var(--arc-wash); }

/* ---- scrollbars, kept quiet ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nf-ink-700); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--nf-ink-600); }

/* ---- the Electrode loader: the brand already owns a spinner, so use the real file ----
   Broken tube ring in Neon, hot terminal in Arc. The shipped SVG carries no animation of its
   own here, so the rotation lives in CSS. */
.nf-load {
  display: inline-block; width: 16px; height: 16px; vertical-align: middle;
  background: url('/apps/assets/neofoundry-loader-electrode.svg') center / contain no-repeat;
  animation: nf-spin .9s linear infinite;
}
.nf-load.lg { width: 28px; height: 28px; }
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* ---- REC: the brand's own status glyph. Neon is UI-and-loading only, and a live dashboard
   is exactly that. This is the one place magenta gets to carry a whole idea. ---- */
.nf-rec { display: inline-flex; align-items: center; gap: 7px; }
.nf-rec .nf-dot { background: var(--nf-neon); animation: nf-blink 2.2s var(--ease) infinite; }
.nf-rec .lbl {
  font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--nf-neon);
}
@keyframes nf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
.nf-rec.lost .nf-dot { background: var(--nf-ink-600); animation: none; }
.nf-rec.lost .lbl { color: var(--nf-ink-600); }

/* ---- rendered markdown ---- */
.nf-md { font: 400 14px/1.65 var(--body); color: var(--nf-grey-200); }
.nf-md h1, .nf-md h2, .nf-md h3 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--nf-bone); line-height: 1.1; margin: 26px 0 10px;
}
.nf-md h1 { font-size: 22px; margin-top: 0; }
.nf-md h2 { font-size: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.nf-md h3 { font-size: 13px; color: var(--nf-grey-300); }
.nf-md p { margin: 0 0 12px; }
.nf-md a { color: var(--nf-arc); text-decoration: none; border-bottom: 1px solid var(--arc-edge); }
.nf-md a:hover { color: var(--nf-bone); border-color: var(--nf-bone); }
.nf-md strong { color: var(--nf-bone); font-weight: 500; }
.nf-md code {
  font: 400 12px/1.5 var(--mono); background: var(--nf-ink-800);
  border: 1px solid var(--hair); border-radius: 2px; padding: 1px 5px; color: var(--nf-arc);
}
.nf-md pre {
  background: var(--nf-ink-800); border: 1px solid var(--hair); border-left: 2px solid var(--nf-arc);
  border-radius: 2px; padding: 13px 15px; overflow-x: auto; margin: 0 0 14px;
}
.nf-md pre code { background: none; border: 0; padding: 0; color: var(--nf-grey-200); }
.nf-md ul, .nf-md ol { margin: 0 0 12px; padding-left: 20px; }
.nf-md li { margin: 4px 0; }
.nf-md blockquote {
  margin: 0 0 14px; padding: 2px 0 2px 15px; border-left: 2px solid var(--nf-arc);
  color: var(--nf-grey-300);
}
.nf-md hr { border: 0; border-top: 1px solid var(--hair); margin: 22px 0; }
.nf-md table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 13px; }
.nf-md th, .nf-md td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--hair); }
.nf-md th {
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--nf-grey-400); border-top: 0; border-bottom: 1px solid var(--hair-strong);
}
.nf-md td code { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .nf-field .scan, .nf-beam::before, .nf-load, .nf-rec .nf-dot { animation: none; }
}