/* Neux design tokens for the neuxai theme — GENERATED by neux-ai scripts/ssr-theme.mjs
   from design drop design.2026.09.17-1: tokens/*.css verbatim, in the drop's styles.css order.
   tokens/fonts.css is left out — it pulls both families from Google Fonts — and its
   three variables are restated below with the faces self-hosted. */

/* ── tokens/colors.css ── */
/* Neux colour system — a monochrome instrument palette on true black.
   Base ramp = cool neutrals (slight blue cast). One brand accent (Neux Blue,
   inherited from the NeuxScience sub-brand) plus three state colours. */
:root{
  /* Neutral ramp — dark end */
  --black:#000000;
  --near-black:#0A0B0D;
  --carbon-900:#101215;
  --carbon-800:#16191D;
  --carbon-700:#1E2228;
  --carbon-600:#272C33;
  --carbon-500:#3A4149;
  --slate-400:#5B636D;
  --slate-300:#828A94;
  --slate-200:#AEB5BD;
  --slate-100:#D5D9DE;
  --paper:#F4F5F6;
  --white:#FFFFFF;

  /* Brand accent */
  --blue-600:#0B3ED9;
  --blue-500:#1F5FFF;
  --blue-400:#4E82FF;
  --blue-300:#8FADFF;
  --blue-050:#E8EFFF;

  /* Spectrum — the progression accent. Pink → Neux Blue → violet, used ONLY as a
     1px rule or 2px edge to mark a sequence, a stage, or an active position.
     Never as a fill, never behind type. */
  --spectrum-pink:#FF4FA3;
  --spectrum-blue:#1F5FFF;
  --spectrum-violet:#7A3DFF;
  --gradient-spectrum:linear-gradient(90deg,#FF4FA3 0%,#1F5FFF 50%,#7A3DFF 100%); /* @kind other */
  --gradient-spectrum-v:linear-gradient(180deg,#FF4FA3 0%,#1F5FFF 50%,#7A3DFF 100%); /* @kind other */

  /* State */
  --verified-500:#23C980;
  --verified-050:#0C2A1E;
  --caution-500:#E8A33D;
  --caution-050:#2B2010;
  --fault-500:#FF4438;
  --fault-050:#2C1210;

  /* ---- Semantic aliases: dark surface (default) ---- */
  --surface-canvas:var(--black);
  --surface-raised:var(--near-black);
  --surface-card:var(--carbon-900);
  --surface-inset:var(--carbon-800);
  --surface-hover:var(--carbon-800);
  --surface-invert:var(--white);

  --text-primary:var(--white);
  --text-secondary:var(--slate-200);
  --text-muted:var(--slate-300);
  --text-faint:var(--slate-400);
  --text-invert:var(--black);
  --text-accent:var(--blue-400);
  --text-link:var(--white);
  --text-link-hover:var(--blue-400);

  --line-hairline:rgba(255,255,255,.10);
  --line-default:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.32);
  --line-accent:var(--blue-500);

  --accent:var(--blue-500);
  --accent-hover:var(--blue-400);
  --accent-press:var(--blue-600);
  --accent-ink:var(--white);

  --focus-ring:var(--blue-400);
  --overlay-scrim:rgba(0,0,0,.72);
}

/* ---- Light scope: documents, print, inverted sections ---- */
[data-theme="light"]{
  --surface-canvas:var(--white);
  --surface-raised:var(--paper);
  --surface-card:var(--white);
  --surface-inset:var(--paper);
  --surface-hover:var(--paper);
  --surface-invert:var(--black);

  --text-primary:var(--black);
  --text-secondary:var(--carbon-600);
  --text-muted:var(--slate-400);
  --text-faint:var(--slate-300);
  --text-invert:var(--white);
  --text-accent:var(--blue-600);
  --text-link:var(--black);
  --text-link-hover:var(--blue-600);

  --line-hairline:rgba(0,0,0,.10);
  --line-default:rgba(0,0,0,.18);
  --line-strong:rgba(0,0,0,.42);
  --overlay-scrim:rgba(0,0,0,.48);
}

/* ── tokens/typography.css ── */
/* Type scale. Display sizes are statement-scale: the brand speaks in large,
   tightly-tracked sentences rather than short punchy headlines. */
:root{
  --fs-display-1:clamp(44px,5.4vw,84px); /* @kind font */
  --fs-display-2:clamp(34px,3.8vw,58px); /* @kind font */
  --fs-headline:clamp(26px,2.4vw,38px); /* @kind font */
  --fs-title:24px; /* @kind font */
  --fs-subtitle:20px; /* @kind font */
  --fs-body-lg:18px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-body-sm:14px; /* @kind font */
  --fs-caption:13px; /* @kind font */
  --fs-micro:11px; /* @kind font */

  --lh-display:1.04; /* @kind other */
  --lh-headline:1.14; /* @kind other */
  --lh-title:1.25; /* @kind other */
  --lh-body:1.62; /* @kind other */
  --lh-tight:1.35; /* @kind other */

  --tracking-display:-0.028em; /* @kind other */
  --tracking-headline:-0.018em; /* @kind other */
  --tracking-title:-0.012em; /* @kind other */
  --tracking-body:-0.003em; /* @kind other */
  --tracking-label:0.14em; /* @kind other */
  --tracking-wordmark:-0.02em; /* @kind other */

  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-black:800; /* @kind other */

  --measure-prose:68ch; /* @kind other */
  --measure-lede:44ch; /* @kind other */
}

/* ── tokens/spacing.css ── */
/* 4px base grid. Section rhythm is generous — the brand is quiet and airy. */
:root{
  --space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
  --space-10:64px;--space-11:80px;--space-12:104px;--space-13:136px;--space-14:176px;

  --gutter:var(--space-6);
  --section-y:clamp(72px,9vw,136px); /* @kind spacing */
  --page-max:1240px;
  --page-narrow:860px;
  --page-pad:clamp(20px,4vw,56px);
}

/* ── tokens/radius.css ── */
/* Corners are near-square. Nothing in the brand is pill-shaped except status
   dots; cards and buttons read as engineered plates, not soft UI. */
:root{
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:4px;
  --radius-3:6px;
  --radius-card:2px;
  --radius-control:2px;
  --radius-full:999px;
}

/* ── tokens/elevation.css ── */
/* On black, elevation is expressed with hairline borders and a faint inner
   top-light, not drop shadows. Drop shadows exist only on light surfaces. */
:root{
  --shadow-none:none;
  --shadow-inner-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-inner-edge:inset 0 0 0 1px rgba(255,255,255,.08);
  --shadow-lift:0 1px 0 rgba(255,255,255,.08), 0 24px 48px -32px rgba(0,0,0,.9);
  --shadow-light-1:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-light-2:0 8px 28px -12px rgba(0,0,0,.18);
  --glow-accent:0 0 0 1px var(--blue-500), 0 0 32px -8px rgba(31,95,255,.55);
  --border-hairline:1px solid var(--line-hairline);
  --border-default:1px solid var(--line-default);
  --border-strong:1px solid var(--line-strong);
}

/* ── tokens/motion.css ── */
/* Motion is instrumental: short, linear-ish, no bounce, no scale-up.
   Things fade and shift by a few pixels; nothing springs. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --shift-hover:2px; /* @kind other */
  --press-opacity:.72; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-instant:0ms; /* @kind other */
  --dur-fast:0ms; /* @kind other */
  --dur-base:0ms; /* @kind other */
  --dur-slow:0ms; /* @kind other */
  --dur-reveal:0ms; /* @kind other */
}}

/* ── tokens/base.css ── */
/* Minimal element defaults so specimen cards, kits and consumer pages all
   inherit the brand's baseline without a reset framework. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tracking-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:var(--tracking-headline);line-height:var(--lh-headline);text-wrap:balance}
h1{font-size:var(--fs-display-1);line-height:var(--lh-display);letter-spacing:var(--tracking-display)}
h2{font-size:var(--fs-display-2);line-height:var(--lh-display);letter-spacing:var(--tracking-display)}
h3{font-size:var(--fs-headline)}
h4{font-size:var(--fs-title);letter-spacing:var(--tracking-title)}
p{margin:0;text-wrap:pretty;max-width:var(--measure-prose)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--line-accent)}
a:active{opacity:var(--press-opacity)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.92em}
hr{border:0;border-top:var(--border-hairline);margin:var(--space-9) 0}
::selection{background:var(--blue-500);color:var(--white)}
.neux-eyebrow{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.neux-page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-pad)}

/* ── fonts: tokens/fonts.css's variables; Archivo 400/500 here, IBM Plex Mono 400 from _base ── */
:root{--font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--font-text:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}

/* ── the share card's palette ───────────────────────────────────────────────
   The renderer paints every 1200x630 card from these names (ssr/server/og.py), which
   are the shared layer's. They are aliases for Neux values, as literal hex because
   that is what the card reads — the "paper" is the brand's true-black canvas.
   The eight topic keys are the spectrum sampled left to right, so the card's top
   strip is the drop's progression rule; no Neux page is coloured by them. */
:root{
  --paper-100:#000000;   /* canvas: --black */
  --ink-900:#FFFFFF;     /* title: --white */
  --ink-500:#828A94;     /* byline: --slate-300, --text-muted */
  --ink-300:#5B636D;     /* separators: --slate-400, --text-faint */
  --claret-600:#1F5FFF;  /* the site card's one rule: --blue-500, the one accent */
  --topic-default:#828A94; /* a post's field label and rule: --text-muted */
  --topic-cognition:#E351AF;
  --topic-sleep:#AB55C6;
  --topic-emotion:#7359DD;
  --topic-mental:#3B5DF4;
  --topic-development:#2A5BFF;
  --topic-language:#4152FF;
  --topic-body:#584AFF;
  --topic-method:#6F41FF;
}