/* =========================================================================
Nexus Design System — Tokens
Premium + user friendly. Dark-first, with a light surface variant.
Logo-derived palette: midnight navy bedrock, gradient curves of cool blue
and fresh spring-green that meet at the "x" of the wordmark.
========================================================================= */
/* ---------- Fonts ----------------------------------------------------------
Display: Ulm Grotesk (brand-owned, local — Regular/Bold/Extrabold)
Body: Manrope (rounded, premium, very readable — Google Fonts)
Mono: JetBrains Mono (developer surfaces — code/logs/agent traces)
--------------------------------------------------------------------------- */
@font-face {
font-family: "Ulm Grotesk";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/ulm-grotesk-regular.ttf") format("truetype");
}
@font-face {
font-family: "Ulm Grotesk";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/ulm-grotesk-bold.ttf") format("truetype");
}
@font-face {
font-family: "Ulm Grotesk";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("fonts/ulm-grotesk-extrabold.ttf") format("truetype");
}
/* Akzidenz Grotesk Black wired as the heaviest weight on the display family.
Use sparingly for poster moments — section openers, hero numerals. */
@font-face {
font-family: "Ulm Grotesk";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("fonts/akzidenz-grotesk-black.ttf") format("truetype");
}
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
:root {
/* -- Brand core ---------------------------------------------------------- */
--brand-midnight: #0E0A26; /* logo background — bedrock */
--brand-deep: #060115; /* one notch deeper, used for void/wells */
--brand-blue: #2E85CB; /* upper curve, primary cool */
--brand-teal: #26B5C4; /* curve apex, secondary cool */
--brand-green: #44D876; /* lower curve, primary action */
--brand-mint: #7BE89B; /* highlight, success peak */
--brand-white: #FFFFFF;
/* The signature gradient (the "x" arc). Always blue→green, never reversed. */
--brand-arc: linear-gradient(135deg, #2E85CB 0%, #26B5C4 45%, #44D876 100%);
--brand-arc-soft: linear-gradient(135deg, rgba(46,133,203,.18) 0%, rgba(38,181,196,.14) 50%, rgba(68,216,118,.18) 100%);
--brand-glow-blue: 0 0 40px rgba(46,133,203,.45);
--brand-glow-green: 0 0 40px rgba(68,216,118,.45);
/* -- Neutral scale (dark-first) ---------------------------------------- */
/* Used as backgrounds and surfaces. Tinted slightly cool to sit with brand. */
--ink-1000: #06031A; /* deepest void */
--ink-950: #0E0A26; /* canvas (matches brand-midnight) */
--ink-900: #15102F; /* raised surface */
--ink-800: #1D1840; /* card */
--ink-700: #2A2455; /* hover surface */
--ink-600: #3A3470; /* divider strong */
--ink-500: #565093; /* muted accent */
--ink-400: #7B76B5; /* placeholder */
--ink-300: #A8A4D1; /* secondary text on dark */
--ink-200: #CFCCE6; /* primary text on dark (soft white) */
--ink-100: #E8E6F3; /* high-emphasis text on dark */
--ink-50: #F5F4FB; /* light-mode canvas */
--ink-0: #FFFFFF;
/* Hairlines and dividers — translucent so they layer cleanly on gradients */
--line-1: rgba(255,255,255,.06);
--line-2: rgba(255,255,255,.10);
--line-3: rgba(255,255,255,.18);
/* -- Semantic foreground / background (DARK theme, default) ------------- */
--bg: var(--ink-950);
--bg-raised: var(--ink-900);
--bg-card: var(--ink-800);
--bg-hover: var(--ink-700);
--bg-input: rgba(255,255,255,.04);
--fg-1: var(--ink-100); /* highest emphasis — headlines */
--fg-2: var(--ink-200); /* body */
--fg-3: var(--ink-300); /* secondary, captions */
--fg-4: var(--ink-400); /* placeholder, disabled */
--fg-on-brand: var(--brand-midnight); /* text on green/blue solid */
--border: var(--line-2);
--border-strong: var(--line-3);
/* -- Status colors ----------------------------------------------------- */
--success: #44D876;
--success-soft: rgba(68,216,118,.12);
--warning: #F5B544;
--warning-soft: rgba(245,181,68,.14);
--danger: #FF6B7A;
--danger-soft: rgba(255,107,122,.14);
--info: #2E85CB;
--info-soft: rgba(46,133,203,.14);
/* Agent-state semantic (Nexus-specific) -- thinking/running/idle/error */
--state-thinking: #26B5C4; /* teal — reasoning */
--state-running: #44D876; /* green — executing */
--state-idle: #7B76B5; /* ink-400 — waiting */
--state-error: #FF6B7A; /* coral — failed */
/* -- Type families ------------------------------------------------------ */
--font-display: "Ulm Grotesk", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* -- Type scale (modular, 1.250) ---------------------------------------- */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 17px;
--fs-lg: 21px;
--fs-xl: 26px;
--fs-2xl: 33px;
--fs-3xl: 42px;
--fs-4xl: 56px;
--fs-5xl: 76px;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed:1.65;
--tracking-display: -0.02em; /* tighter for big text */
--tracking-body: -0.005em;
--tracking-eyebrow: 0.14em; /* loose, uppercase tags */
/* -- Spacing scale (4px grid) ------------------------------------------ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* -- Radii -------------------------------------------------------------- */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 28px;
--r-full: 9999px;
/* -- Shadows (dark theme — soft glows, no harsh blacks) ----------------- */
--shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.5);
--shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.45);
--shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 48px rgba(0,0,0,.55);
--shadow-pop: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 80px rgba(0,0,0,.7),
0 0 0 1px rgba(255,255,255,.04);
--ring-focus: 0 0 0 3px rgba(68,216,118,.35);
--ring-focus-blue: 0 0 0 3px rgba(46,133,203,.35);
/* -- Motion ------------------------------------------------------------- */
--ease-out: cubic-bezier(.2,.7,.2,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 420ms;
}
/* -------------------------------------------------------------------------
Light theme override
Use on marketing surfaces and end-user app screens that need readability
in daylight. Toggle via [data-theme="light"] on a wrapper.
------------------------------------------------------------------------- */
[data-theme="light"] {
--bg: #F5F4FB;
--bg-raised: #FFFFFF;
--bg-card: #FFFFFF;
--bg-hover: #ECEAF5;
--bg-input: #FFFFFF;
--fg-1: #0E0A26;
--fg-2: #2A2455;
--fg-3: #565093;
--fg-4: #7B76B5;
--fg-on-brand: #FFFFFF;
--border: rgba(14,10,38,.10);
--border-strong: rgba(14,10,38,.18);
--shadow-1: 0 1px 2px rgba(14,10,38,.06);
--shadow-2: 0 6px 20px rgba(14,10,38,.08);
--shadow-3: 0 16px 40px rgba(14,10,38,.10);
--shadow-pop: 0 24px 60px rgba(14,10,38,.14), 0 0 0 1px rgba(14,10,38,.06);
}
/* =========================================================================
Element-level defaults (so ``, `
`, `` look right out of box)
========================================================================= */
body {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg-2);
background: var(--bg);
letter-spacing: var(--tracking-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .display {
font-family: var(--font-display);
color: var(--fg-1);
letter-spacing: var(--tracking-display);
line-height: var(--lh-tight);
font-weight: 600;
margin: 0;
}
h1 { font-size: var(--fs-4xl); font-weight: 700; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 600; }
p, li { font-family: var(--font-body); line-height: var(--lh-normal); }
small, .caption {
font-size: var(--fs-sm);
color: var(--fg-3);
line-height: var(--lh-snug);
}
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--fg-3);
}
code, kbd, pre, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
code {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-xs);
padding: 0.08em 0.4em;
color: var(--brand-mint);
}
a { color: var(--brand-teal); text-decoration: none; }
a:hover { color: var(--brand-mint); }
::selection { background: rgba(68,216,118,.35); color: var(--ink-100); }