/* ============================================================
NISHI SOVEREIGN DESIGN SYSTEM v1
------------------------------------------------------------
Debt seq247 rung U2: a shared design system so page emitters
stop baking dev-grade defaults.
Adoption is ONE line in :
The emitter must ALSO emit these three, which no stylesheet
can supply and which nx_page_verify checks:
... wrapping the primary content
Proven on /funding.html + /trade.html: a11y-issues=0, GREEN.
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root {
/* ground + ink -- neutrals carry a slight blue-slate bias toward
the accent so they read as chosen, not defaulted */
--nx-paper: #F6F7F4;
--nx-surface: #FFFFFF;
--nx-surface-2: #EEF0EC;
--nx-field: #FBFCFA;
--nx-ink: #14181F;
--nx-slate: #58626E;
--nx-slate-soft: #7C8794;
--nx-rule: #D8DCD5;
--nx-rule-soft: #E6E9E2;
/* accent */
--nx-accent: #174E5E;
--nx-accent-2: #2C7C91;
/* semantic state -- deliberately NOT the accent hue */
--nx-open: #2F6B4E;
--nx-gated: #8F5D18;
--nx-closed: #96372B;
--nx-open-bg: #E4EFE7;
--nx-gated-bg: #F6EDDC;
--nx-closed-bg: #F7E4E0;
/* type roles -- system stacks only; the Artifact/edge CSP blocks
font CDNs, and a silent webfont fallback is worse than a
deliberate system stack */
--nx-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--nx-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--nx-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
/* type scale -- 1.25 minor third, fluid at the display end */
--nx-t-xs: 0.68rem;
--nx-t-sm: 0.85rem;
--nx-t-base: 1rem;
--nx-t-lg: 1.16rem;
--nx-t-xl: clamp(1.35rem, 2.8vw, 1.8rem);
--nx-t-2xl: clamp(1.9rem, 4.6vw, 2.9rem);
/* space -- one 4px-derived ramp, used via gap not per-element margin */
--nx-s-1: 0.25rem;
--nx-s-2: 0.5rem;
--nx-s-3: 0.75rem;
--nx-s-4: 1rem;
--nx-s-5: 1.5rem;
--nx-s-6: 2rem;
--nx-s-7: 3rem;
--nx-s-8: 4rem;
--nx-measure: 44rem; /* ~65ch of running text */
--nx-wrap: 68rem;
--nx-radius: 2px;
}
/* dark: redefine TOKENS ONLY -- never restyle components inside
the media query, or the data-theme override cannot win */
@media (prefers-color-scheme: dark) {
:root {
--nx-paper:#10141A; --nx-surface:#171C24; --nx-surface-2:#1E242D; --nx-field:#131820;
--nx-ink:#E7EAE5; --nx-slate:#9AA5B1; --nx-slate-soft:#78838F;
--nx-rule:#2C3540; --nx-rule-soft:#232A34;
--nx-accent:#58A8BC; --nx-accent-2:#7FC4D6;
--nx-open:#6FBE93; --nx-gated:#D2A153; --nx-closed:#E08072;
--nx-open-bg:#1A2C23; --nx-gated-bg:#2E2718; --nx-closed-bg:#2E1D1A;
}
}
/* explicit toggle must beat the media query in BOTH directions */
:root[data-theme="dark"] {
--nx-paper:#10141A; --nx-surface:#171C24; --nx-surface-2:#1E242D; --nx-field:#131820;
--nx-ink:#E7EAE5; --nx-slate:#9AA5B1; --nx-slate-soft:#78838F;
--nx-rule:#2C3540; --nx-rule-soft:#232A34;
--nx-accent:#58A8BC; --nx-accent-2:#7FC4D6;
--nx-open:#6FBE93; --nx-gated:#D2A153; --nx-closed:#E08072;
--nx-open-bg:#1A2C23; --nx-gated-bg:#2E2718; --nx-closed-bg:#2E1D1A;
}
:root[data-theme="light"] {
--nx-paper:#F6F7F4; --nx-surface:#FFFFFF; --nx-surface-2:#EEF0EC; --nx-field:#FBFCFA;
--nx-ink:#14181F; --nx-slate:#58626E; --nx-slate-soft:#7C8794;
--nx-rule:#D8DCD5; --nx-rule-soft:#E6E9E2;
--nx-accent:#174E5E; --nx-accent-2:#2C7C91;
--nx-open:#2F6B4E; --nx-gated:#8F5D18; --nx-closed:#96372B;
--nx-open-bg:#E4EFE7; --nx-gated-bg:#F6EDDC; --nx-closed-bg:#F7E4E0;
}
/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--nx-paper);
color: var(--nx-ink);
font-family: var(--nx-sans);
font-size: var(--nx-t-base);
line-height: 1.6;
margin: 0;
padding: 0 5vw var(--nx-s-8);
-webkit-font-smoothing: antialiased;
}
.nx-wrap { max-width: var(--nx-wrap); margin: 0 auto; }
h1, h2, h3 { font-family: var(--nx-serif); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: var(--nx-t-2xl); line-height: 1.09; letter-spacing: -0.015em; }
h2 { font-size: var(--nx-t-xl); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--nx-t-lg); line-height: 1.3; }
p { max-width: var(--nx-measure); margin: 0 0 var(--nx-s-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--nx-accent); text-underline-offset: 2px; }
strong { font-weight: 650; }
code, .nx-mono { font-family: var(--nx-mono); font-size: 0.87em; }
code { background: var(--nx-surface-2); padding: 0.1em 0.36em; border-radius: var(--nx-radius); }
/* focus must be VISIBLE -- the single most-skipped hygiene item */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
border-radius: var(--nx-radius);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- 3. STRUCTURE ---------- */
.nx-masthead { border-bottom: 2px solid var(--nx-ink); padding: var(--nx-s-7) 0 var(--nx-s-5); margin-bottom: var(--nx-s-6); }
.nx-eyebrow {
font-family: var(--nx-mono); font-size: 0.7rem; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--nx-slate);
display: flex; flex-wrap: wrap; gap: var(--nx-s-2) var(--nx-s-5);
margin-bottom: var(--nx-s-5);
}
.nx-standfirst {
font-family: var(--nx-serif); font-size: clamp(1.02rem, 2vw, 1.2rem);
line-height: 1.5; color: var(--nx-slate); max-width: 46rem; margin: 0;
}
.nx-section { margin-bottom: var(--nx-s-8); }
.nx-sec-head {
display: flex; align-items: baseline; gap: var(--nx-s-4);
border-bottom: 1px solid var(--nx-rule);
padding-bottom: var(--nx-s-3); margin-bottom: var(--nx-s-5);
}
.nx-sec-mark {
font-family: var(--nx-mono); font-size: 0.72rem; letter-spacing: 0.1em;
color: var(--nx-accent); white-space: nowrap; padding-top: 0.2em;
}
/* ---------- 4. COMPONENTS ---------- */
/* state chip -- encode status in FORM as well as text so it reads at a glance */
.nx-chip {
font-family: var(--nx-mono); font-size: 0.66rem; letter-spacing: 0.08em;
text-transform: uppercase; font-weight: 600;
padding: 0.28em 0.6em; border-radius: var(--nx-radius);
white-space: nowrap; display: inline-block;
}
.nx-chip.is-open { color: var(--nx-open); background: var(--nx-open-bg); }
.nx-chip.is-gated { color: var(--nx-gated); background: var(--nx-gated-bg); }
.nx-chip.is-closed { color: var(--nx-closed); background: var(--nx-closed-bg); }
.nx-panel { background: var(--nx-surface); border: 1px solid var(--nx-rule); }
.nx-panel-head {
font-family: var(--nx-mono); font-size: var(--nx-t-xs); letter-spacing: 0.11em;
text-transform: uppercase; color: var(--nx-slate);
padding: var(--nx-s-3) var(--nx-s-5); border-bottom: 1px solid var(--nx-rule);
display: flex; justify-content: space-between; align-items: center; gap: var(--nx-s-4);
}
.nx-panel-body { padding: var(--nx-s-5); display: grid; gap: var(--nx-s-4); }
/* hairline-separated stack -- 1px gap over a rule-coloured ground */
.nx-stack { display: grid; gap: 1px; background: var(--nx-rule); border: 1px solid var(--nx-rule); }
.nx-stack > * { background: var(--nx-surface); padding: var(--nx-s-4) var(--nx-s-5); }
.nx-callout { border-left: 3px solid var(--nx-accent); background: var(--nx-surface); padding: var(--nx-s-5); margin-bottom: var(--nx-s-5); }
.nx-callout.is-warn { border-left-color: var(--nx-closed); }
.nx-callout .nx-k {
font-family: var(--nx-mono); font-size: var(--nx-t-xs); letter-spacing: 0.11em;
text-transform: uppercase; color: var(--nx-accent); display: block; margin-bottom: var(--nx-s-2);
}
.nx-callout.is-warn .nx-k { color: var(--nx-closed); }
/* wide content NEVER scrolls the body sideways -- it scrolls itself */
.nx-scroll { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.nx-table thead th {
font-family: var(--nx-mono); font-size: 0.66rem; letter-spacing: 0.11em;
text-transform: uppercase; color: var(--nx-slate); text-align: left; font-weight: 500;
padding: 0 var(--nx-s-3) var(--nx-s-2) 0; border-bottom: 1px solid var(--nx-ink); white-space: nowrap;
}
.nx-table tbody td { padding: var(--nx-s-3) var(--nx-s-3) var(--nx-s-3) 0; border-bottom: 1px solid var(--nx-rule-soft); vertical-align: top; }
.nx-table tbody tr:last-child td { border-bottom: 1px solid var(--nx-rule); }
.nx-table .nx-num { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* any column of digits lines up */
.nx-tabular { font-variant-numeric: tabular-nums; }
.nx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s-3); }
.nx-checks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: var(--nx-s-3); max-width: 46rem; }
.nx-checks li::before {
content: ""; width: 0.8rem; height: 0.8rem;
border: 1px solid var(--nx-slate-soft); border-radius: var(--nx-radius); margin-top: 0.4em;
}
.nx-field { display: grid; gap: var(--nx-s-1); }
.nx-field label {
font-family: var(--nx-mono); font-size: 0.65rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--nx-slate);
}
.nx-field input, .nx-field select, .nx-field textarea {
font-family: var(--nx-mono); font-size: 0.92rem;
background: var(--nx-field); color: var(--nx-ink);
border: 1px solid var(--nx-rule); border-radius: var(--nx-radius);
padding: var(--nx-s-2) 0.6rem; width: 100%; font-variant-numeric: tabular-nums;
}
.nx-field select { font-family: var(--nx-sans); font-size: 0.88rem; }
.nx-footer {
border-top: 1px solid var(--nx-rule); padding-top: var(--nx-s-5);
font-family: var(--nx-mono); font-size: 0.72rem; letter-spacing: 0.04em;
color: var(--nx-slate-soft); line-height: 1.7;
}
/* ---------- 5. RESPONSIVE ---------- */
/* layout does the spacing: auto-fit grids collapse without media queries */
.nx-grid { display: grid; gap: var(--nx-s-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.nx-grid-sm { display: grid; gap: var(--nx-s-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
@media (max-width: 860px) {
.nx-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
body { padding: 0 6vw var(--nx-s-7); }
}
/* ---------- 5b. v2 COMPONENTS ---------- */
/* Additive only: nothing in 1-5 is redefined, so every page already
on v1 renders byte-identically. Each block below existed as
page-local CSS in at least one emitter before it was hoisted here. */
/* theme toggle -- the tokens have supported data-theme since v1 but
NOTHING EMITTED A CONTROL, so the override path was unreachable for
a reader whose OS preference was wrong. The control is the missing half. */
.nx-theme-toggle {
position: fixed; top: var(--nx-s-4); right: var(--nx-s-4); z-index: 20;
font-family: var(--nx-mono); font-size: 0.66rem; letter-spacing: 0.11em;
text-transform: uppercase; color: var(--nx-slate);
background: var(--nx-surface); border: 1px solid var(--nx-rule);
border-radius: var(--nx-radius); padding: 0.45em 0.75em; cursor: pointer; line-height: 1;
}
.nx-theme-toggle:hover { color: var(--nx-ink); border-color: var(--nx-slate-soft); }
/* ordered procedure -- use ONLY when order carries information the
reader needs. A numbered list of unordered items is decoration. */
.nx-steps { list-style: none; margin: 0; padding: 0; counter-reset: nxstep; display: grid; gap: var(--nx-s-4); }
.nx-steps li { counter-increment: nxstep; position: relative; padding-left: 2.5rem; max-width: var(--nx-measure); }
.nx-steps li::before {
content: counter(nxstep, decimal-leading-zero); position: absolute; left: 0; top: 0.1em;
font-family: var(--nx-mono); font-size: 0.72rem; letter-spacing: 0.08em;
color: var(--nx-accent); font-weight: 600;
}
/* ledger -- label + figure, ruled total. Figures are tabular by
construction so a column of them cannot fail to align. */
.nx-ledger { background: var(--nx-surface); border: 1px solid var(--nx-rule); padding: var(--nx-s-5) var(--nx-s-5); max-width: 48rem; }
.nx-ledger-row {
display: grid; grid-template-columns: 1fr auto; gap: var(--nx-s-5);
padding: var(--nx-s-3) 0; border-bottom: 1px solid var(--nx-rule-soft); font-size: 0.94rem;
}
.nx-ledger-row:last-child { border-bottom: none; }
.nx-ledger-row .nx-ledger-val { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nx-slate); }
.nx-ledger-row.is-total { border-top: 2px solid var(--nx-ink); border-bottom: none; margin-top: var(--nx-s-2); padding-top: var(--nx-s-4); font-weight: 650; }
.nx-ledger-row.is-total .nx-ledger-val { color: var(--nx-accent); }
/* pull quote -- one per section at most; it marks the claim the
section exists to make. */
.nx-pull {
font-family: var(--nx-serif); font-size: var(--nx-t-lg); line-height: 1.45;
color: var(--nx-ink); max-width: 38rem; margin: var(--nx-s-5) 0 0;
padding-left: var(--nx-s-4); border-left: 3px solid var(--nx-accent);
}
/* state rail -- a sequence of stages each carrying an is-open/gated/closed
state. Colour is redundant with the chip text, never the only channel. */
.nx-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 3px; }
.nx-rung { background: var(--nx-surface); border-top: 4px solid var(--nx-rule); padding: var(--nx-s-4); display: flex; flex-direction: column; gap: var(--nx-s-2); }
.nx-rung.is-open { border-top-color: var(--nx-open); }
.nx-rung.is-gated { border-top-color: var(--nx-gated); }
.nx-rung.is-closed { border-top-color: var(--nx-closed); }
.nx-rung-tier { font-family: var(--nx-mono); font-size: var(--nx-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-slate-soft); }
.nx-rung-name { font-family: var(--nx-serif); font-size: var(--nx-t-lg); line-height: 1.2; }
.nx-rung .nx-chip { align-self: flex-start; }
.nx-rung p { font-size: 0.82rem; line-height: 1.45; color: var(--nx-slate); margin: 0; max-width: none; }
/* reference columns -- collapses to one column under its own min width,
no media query needed. */
.nx-sources { columns: 2; column-gap: var(--nx-s-7); font-size: 0.8rem; line-height: 1.55; }
.nx-sources p { break-inside: avoid; margin: 0 0 var(--nx-s-3); color: var(--nx-slate); max-width: none; }
@media (max-width: 640px) { .nx-sources { columns: 1; } }
/* ---------- 6. PRINT ---------- */
@media print {
body { background: #fff; color: #000; padding: 0; }
.nx-panel, .nx-callout, .nx-stack > * { background: #fff; }
a { text-decoration: underline; }
.nx-section { break-inside: avoid; }
}