/* ============================================================ NivaLogic — Brand Design Tokens Marketing-grade identity: "Fluent in both rooms." Import order: nivalogic-fonts.css → nivalogic-tokens.css → nivalogic-brand.css Version: v2.0 — 2026-07-23 (supersedes v1.0) What changed from v1 → v2: • Palette disciplined from 6 accents to a working 4. Coral is RETIRED from the marketing set (alerts/errors only). • Type retires Montserrat + Open Sans → Fraunces (display serif), IBM Plex Mono (technical register), Inter (body). • Cream #F1F0EA adopted from the real logo (warmer than old flat white). • Buttons squared (3–4px) — pills retired for the premium register. Legacy v1 aliases are kept at the bottom so old artifacts don't break. ============================================================ */ :root { /* ---------- Core brand palette ---------- */ --niva-ink: #0B1D3A; /* primary ground — navy */ --niva-abyss: #071426; /* deepest layer / page foot */ --niva-ink-700: #10264A; /* raised surface on ink */ --niva-ink-600: #16315C; /* borders / hover on ink */ --niva-cream: #F1F0EA; /* premium light surface (from the logo) */ --niva-cyan: #00C4CC; /* SIGNAL accent — use sparingly ("the first call") */ --niva-cyan-soft: #63E1E6; /* cyan for text/hover on dark */ --niva-brass: #D4A017; /* premium accent + hairlines */ --niva-brass-soft: #E7C25E; /* brass for text on dark */ --niva-coral: #FF6B6B; /* RETIRED from marketing — alerts/errors only */ /* ---------- Signature backgrounds ---------- */ --niva-gradient: linear-gradient(180deg, #0B1D3A 0%, #0A1B36 55%, #071426 100%); --niva-glow: /* ambient "signal" wash */ radial-gradient(120% 80% at 82% -8%, rgba(0,196,204,.10), transparent 48%), radial-gradient(90% 70% at 8% 108%, rgba(212,160,23,.055), transparent 52%); /* ---------- Semantic aliases (default = dark / navy) ---------- */ --niva-bg: var(--niva-ink); --niva-surface: var(--niva-ink-700); --niva-fg: #E8EBF2; /* primary text on ink (soft warm-white) */ --niva-fg-soft: #C3CAD9; /* secondary text */ --niva-fg-muted: #8A93A8; /* labels / captions */ --niva-accent: var(--niva-cyan); --niva-accent-soft: var(--niva-cyan-soft); --niva-premium: var(--niva-brass); --niva-premium-soft: var(--niva-brass-soft); --niva-border: rgba(233, 236, 244, 0.12); --niva-border-strong: rgba(233, 236, 244, 0.22); --niva-focus: var(--niva-cyan); --niva-link: var(--niva-cyan); --niva-link-hover: var(--niva-cyan-soft); /* ---------- Typography ---------- Display = Fraunces — editorial serif, senior counsel, the published POV Body = Inter — quiet, legible connective tissue Mono = IBM Plex Mono — the engineering register: eyebrows, indices, data */ --niva-font-display: "Fraunces", Georgia, "Times New Roman", serif; --niva-font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --niva-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; --niva-weight-body: 400; --niva-weight-medium: 500; --niva-weight-display: 600; /* Fraunces SemiBold — headings */ --niva-weight-black: 900; /* Fraunces Black — impact / hero */ --niva-leading: 1.6; --niva-leading-tight: 1.04; /* display headings */ --niva-tracking-display: -0.02em; --niva-tracking-mono: 0.2em; /* uppercase mono eyebrows/labels */ /* modular type scale */ --niva-text-xs: 0.72rem; --niva-text-sm: 0.875rem; --niva-text-base: 1rem; --niva-text-lg: 1.125rem; --niva-text-xl: 1.32rem; --niva-text-2xl: clamp(1.4rem, 2.5vw, 1.95rem); --niva-text-3xl: clamp(2rem, 4.2vw, 3.1rem); --niva-text-display: clamp(2.9rem, 7.4vw, 5.7rem); /* hero */ /* ---------- Spacing (8px base) ---------- */ --niva-space-1: 0.25rem; --niva-space-2: 0.5rem; --niva-space-3: 0.75rem; --niva-space-4: 1rem; --niva-space-5: 1.5rem; --niva-space-6: 2rem; --niva-space-8: 3rem; --niva-space-10: 4rem; --niva-section: clamp(4.5rem, 9vw, 9rem); /* ---------- Radius / shadow / border ---------- Squared for the premium register; pill kept only for status dots/chips. */ --niva-radius-sm: 3px; --niva-radius: 4px; --niva-radius-lg: 6px; --niva-radius-pill: 999px; --niva-border-width: 1px; --niva-shadow: 0 4px 20px rgba(4, 12, 26, 0.35); --niva-shadow-lg: 0 14px 44px rgba(4, 12, 26, 0.5); /* ---------- Motion ---------- */ --niva-transition: 160ms ease; --niva-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- Light theme override — the "document world" ---------- Cream surface, ink text. For whitepapers, decks, board memos, print. Apply on a container:
…
*/ .niva-theme-light, [data-niva-theme="light"] { --niva-bg: var(--niva-cream); --niva-surface: #FFFFFF; --niva-fg: var(--niva-ink); --niva-fg-soft: #4A5063; --niva-fg-muted: #7A8194; --niva-border: rgba(11, 29, 58, 0.14); --niva-border-strong: rgba(11, 29, 58, 0.24); --niva-accent: #0E7C82; /* darker cyan for contrast on cream */ --niva-accent-soft: var(--niva-cyan); --niva-link: #0E7C82; --niva-link-hover: var(--niva-cyan); --niva-glow: none; } /* ============================================================ Legacy v1 aliases — deprecated, kept for back-compat. Prefer the tokens above. Remove once all artifacts are migrated. ============================================================ */ :root { --niva-navy: var(--niva-ink); --niva-navy-700: var(--niva-ink-700); --niva-navy-600: var(--niva-ink-600); --niva-gold: var(--niva-brass); --niva-charcoal: #2E2E2E; --niva-warm-white: var(--niva-cream); --niva-cool-grey: var(--niva-fg-muted); --niva-accent-2: var(--niva-brass); --niva-accent-3: var(--niva-coral); --niva-font-heading: var(--niva-font-display); --niva-weight-heading: var(--niva-weight-display); --niva-weight-heading-bold: 700; --niva-weight-emphasis: var(--niva-weight-black); }