/* nema design tokens.
*
* The single source of colour, type, spacing, radius, elevation and motion for
* every nema app. Load this file first, then brand.css.
*
*
*
*
* Rules of the system:
* 1. Deep navy ground, restrained cyan. Colour marks state, never decoration.
* 2. Everything sits on an 8 px grid. The 4 px step exists only for insets.
* 3. No gradients except the mark and the progress ring. No glow except the
* 1 px cyan hairline on focus.
* 4. Numbers are tabular. Identifiers are monospace.
*
* Contrast, measured against the ground each token is used on (WCAG 2.1):
* --ink on --navy 17.20:1 --ink on --navy-2 15.95:1
* --ink-2 on --navy 8.47:1 --ink-2 on --navy-2 7.85:1
* --cyan on --navy 12.10:1 --teal on --navy-2 7.88:1
* --sky on --navy-2 10.37:1 --yellow on --navy-2 11.29:1
* --danger on --navy-2 5.81:1 --navy on --cyan 12.10:1
* Every band pill, text over its own tinted ground, clears AA too:
* durable 8.64, usable 6.10, fragile 5.98, uncertain 7.58, unknown 6.32,
* due 8.28, danger 4.91.
* --ink-3 (3.47:1 on navy-2, 3.75:1 on navy) never carries text. It is left
* for non-text graphics, which need 3:1 under WCAG 1.4.11: pill dots, graph
* strokes, strikethroughs and console gutter glyphs. Every label that
* carries information uses --ink-label, which resolves to --ink-2.
* --blue (4.36:1) is a fill and border colour. For blue text use --blue-ink
* (7.07:1), which is the same hue lifted until it passes AA. Prose links are
* --blue-ink with a --blue-40 underline: cyan stays rationed to the current
* nav item, focus and the verified state.
*/
/* ---------------------------------------------------------------- fonts -- */
/* Pixelify Sans, Inter and JetBrains Mono are OFL licensed and self hosted.
* Latin subset only, variable files pinned to one weight per face so no
* third party request is ever made. */
@font-face {
font-family: 'Pixelify Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./fonts/pixelify-sans-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Pixelify Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./fonts/pixelify-sans-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./fonts/inter-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./fonts/inter-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./fonts/inter-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./fonts/jetbrains-mono-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./fonts/jetbrains-mono-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------- tokens -- */
:root {
color-scheme: dark;
/* Ground and structure */
--navy: #0B1320;
--navy-2: #101B2D;
--navy-3: #16233A;
--line: #1E3050;
/* State and accent */
--cyan: #00E5FF;
--teal: #15C4B4;
--blue: #3A78FF;
--sky: #A2CCFF;
--yellow: #FFCA2E;
--danger: #FF5C7A;
/* Text */
--ink: #F2F6FF;
--ink-2: #9FB0CC;
--ink-3: #5E7095;
/* Text safe lift of --blue. Same hue, raised to 7.07:1 on --navy-2. */
--blue-ink: #7BA4FF;
/* Semantic label colour. --ink-3 is 3.47:1, enough for the hairlines and
* dot glyphs it was meant for but under AA for small text, so every label
* that carries information reads at --ink-2 instead. Tune this one token,
* never the raw --ink-3, if the label tone needs to move. */
--ink-label: var(--ink-2);
/* Translucent derivations. Kept as tokens so no component invents its own. */
--cyan-60: rgba(0, 229, 255, 0.60);
--cyan-24: rgba(0, 229, 255, 0.24);
--cyan-12: rgba(0, 229, 255, 0.12);
--teal-14: rgba(21, 196, 180, 0.14);
--blue-14: rgba(58, 120, 255, 0.14);
--blue-40: rgba(58, 120, 255, 0.40);
--sky-14: rgba(162, 204, 255, 0.14);
--yellow-14: rgba(255, 202, 46, 0.14);
--danger-14: rgba(255, 92, 122, 0.14);
--ink-08: rgba(242, 246, 255, 0.08);
--shade-40: rgba(4, 8, 15, 0.40);
--shade-72: rgba(4, 8, 15, 0.72);
/* State bands. Every app reads bands through these three token families:
* --band- the identity colour
* --band--ink the AA safe text colour on a tinted ground
* --band--bg the tinted ground */
--band-durable: var(--cyan);
--band-durable-ink: var(--cyan);
--band-durable-bg: var(--cyan-12);
--band-usable: var(--teal);
--band-usable-ink: var(--teal);
--band-usable-bg: var(--teal-14);
--band-fragile: var(--blue);
--band-fragile-ink: var(--blue-ink);
--band-fragile-bg: var(--blue-14);
--band-uncertain: var(--sky);
--band-uncertain-ink: var(--sky);
--band-uncertain-bg: var(--sky-14);
--band-unknown: var(--ink-3);
--band-unknown-ink: var(--ink-2);
--band-unknown-bg: var(--ink-08);
--band-due: var(--yellow);
--band-due-ink: var(--yellow);
--band-due-bg: var(--yellow-14);
--band-danger: var(--danger);
--band-danger-ink: var(--danger);
--band-danger-bg: var(--danger-14);
/* Type */
--font-display: 'Pixelify Sans', 'Courier New', ui-monospace, monospace;
--font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-10: 10px;
--fs-11: 11px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-16: 16px;
--fs-20: 20px;
--fs-24: 24px;
--fs-32: 32px;
--fs-44: 44px;
--fs-64: 64px;
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-body: 1.6;
--ls-mono: 0.08em;
--ls-label: 0.14em;
/* Spacing, 8 px grid with a 4 px inset step */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* Radii */
--r-1: 2px;
--r-2: 4px;
--r-3: 8px;
--r-round: 999px;
/* Elevation. Flat by design: one border, one soft drop for overlays. */
--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.25);
--shadow-2: 0 8px 24px var(--shade-40);
--shadow-3: 0 24px 64px var(--shade-72);
/* Focus. Two ring parts: the outline and a 1 px inner cyan hairline. */
--focus-ring: 2px solid var(--cyan);
--focus-offset: 2px;
--focus-hairline: 0 0 0 1px var(--cyan-24);
/* Motion */
--dur-1: 120ms;
--dur-2: 150ms;
--dur-3: 180ms;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Layers */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-header: 200;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
/* Layout */
--app-max: 1200px;
--app-pad: var(--sp-5);
--panel-pad: var(--sp-5);
}
@media (max-width: 720px) {
:root {
--app-pad: var(--sp-4);
--panel-pad: var(--sp-4);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-1: 1ms;
--dur-2: 1ms;
--dur-3: 1ms;
}
}