/* ============================================================================= Nexus Base — Shared Reset, Design Tokens, and Utilities Import this AFTER your colour scheme file and BEFORE the layout stylesheet. Load order in _Host.cshtml: 1. command.css (or horizon.css) 2. nexus-base.css ← this file 3. nexus-command.css (or nexus-horizon.css) 4. theme-toggle.js (in to prevent flash) ============================================================================= */ /* ── Shared design tokens (prefix --nx-) ────────────────────────────────────── */ :root { /* Typography */ --nx-font-sans: "Raleway", system-ui, -apple-system, sans-serif; --nx-font-mono: "IBM Plex Mono", "Cascadia Code", "Fira Code", monospace; /* Type scale */ --nx-text-xs: 0.75rem; /* 12px */ --nx-text-sm: 0.875rem; /* 14px */ --nx-text-base: 1rem; /* 16px */ --nx-text-lg: 1.125rem; /* 18px */ --nx-text-xl: 1.25rem; /* 20px */ --nx-text-2xl: 1.5rem; /* 24px */ --nx-text-3xl: 1.875rem; /* 30px */ --nx-text-4xl: 2.25rem; /* 36px */ /* Spacing */ --nx-sp-1: 4px; --nx-sp-2: 8px; --nx-sp-3: 12px; --nx-sp-4: 16px; --nx-sp-5: 20px; --nx-sp-6: 24px; --nx-sp-8: 32px; --nx-sp-10: 40px; --nx-sp-12: 48px; --nx-sp-16: 64px; /* Border radius */ --nx-r-sm: 6px; --nx-r: 12px; --nx-r-lg: 20px; --nx-r-xl: 28px; --nx-r-full: 9999px; /* Motion */ --nx-ease: cubic-bezier(0.16, 1, 0.3, 1); --nx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --nx-dur-sm: 120ms; --nx-dur: 200ms; --nx-dur-lg: 350ms; } /* ── Theme transition (prevent flash, smooth switch) ────────────────────────── */ html { /* Set by theme-toggle.js before paint */ } html.nx-theme-transition, html.nx-theme-transition *, html.nx-theme-transition *::before, html.nx-theme-transition *::after { transition: color var(--nx-dur) ease, background var(--nx-dur) ease, background-color var(--nx-dur) ease, border-color var(--nx-dur) ease, box-shadow var(--nx-dur) ease !important; } /* ── Reset ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } a { color: inherit; } /* ── Focus ring ─────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* ── Utility: screen-reader only ────────────────────────────────────────────── */ .nx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Utility: status chips ──────────────────────────────────────────────────── */ .nx-chip { display: inline-flex; align-items: center; gap: var(--nx-sp-1); padding: 2px 10px; border-radius: var(--nx-r-full); font-size: var(--nx-text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } /* Command chips (use --nc- tokens) */ .nx-chip-ok { background: var(--nc-ok-bg, var(--nh-ok-bg)); color: var(--nc-ok, var(--nh-ok)); } .nx-chip-warn { background: var(--nc-warn-bg, var(--nh-warn-bg)); color: var(--nc-warn, var(--nh-warn)); } .nx-chip-error { background: var(--nc-error-bg, var(--nh-error-bg)); color: var(--nc-error, var(--nh-error)); } .nx-chip-info { background: var(--nc-info-bg, var(--nh-info-bg)); color: var(--nc-info, var(--nh-info)); } /* ── Utility: monospace value display ───────────────────────────────────────── */ .nx-mono { font-family: var(--nx-font-mono); } /* ── Utility: truncate text ─────────────────────────────────────────────────── */ .nx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }