/* * NetworkCore Design Tokens * * Single source of truth for color, type, spacing, radii, shadows, sidebar. * Both admin and portal load this file. Override with `data-theme="dark"` * on for dark mode (toggled via shared/ui.js). * * No utility classes here — see components.css for those. This file ONLY * defines variables. */ :root { /* Color — semantic, not raw values */ --nc-bg: #f6f8fb; --nc-surface: #ffffff; --nc-surface-2: #f9fafb; --nc-border: #e5e7eb; --nc-border-strong: #d1d5db; --nc-text-1: #0f172a; --nc-text-2: #475569; --nc-text-3: #94a3b8; --nc-accent: #2563eb; --nc-accent-2: #1d4ed8; --nc-accent-50: #eff6ff; --nc-accent-fg: #ffffff; --nc-success: #10b981; --nc-success-50: #ecfdf5; --nc-warning: #f59e0b; --nc-warning-50: #fffbeb; --nc-danger: #ef4444; --nc-danger-50: #fef2f2; --nc-info: #0ea5e9; --nc-info-50: #f0f9ff; /* Type */ /* Font stack matches the marketing site at www.networkcore.org. Myriad Pro is the brand typeface; fallback chain degrades cleanly to the system sans on machines without it. Same chain used in docs.networkcore.org. */ --nc-font-sans: "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --nc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --nc-text-xs: 12px; --nc-text-sm: 13px; --nc-text-base: 14px; --nc-text-lg: 16px; --nc-text-xl: 20px; --nc-text-2xl: 28px; --nc-text-3xl: 36px; --nc-leading-tight: 1.25; --nc-leading-normal: 1.5; --nc-weight-normal: 400; --nc-weight-medium: 500; --nc-weight-semi: 600; --nc-weight-bold: 700; /* Layout */ --nc-space-0: 0; --nc-space-1: 4px; --nc-space-2: 8px; --nc-space-3: 12px; --nc-space-4: 16px; --nc-space-5: 20px; --nc-space-6: 24px; --nc-space-8: 32px; --nc-space-10: 40px; --nc-space-12: 48px; --nc-radius-sm: 6px; --nc-radius: 10px; --nc-radius-lg: 14px; --nc-radius-xl: 20px; --nc-radius-pill: 9999px; --nc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --nc-shadow: 0 4px 12px rgba(15, 23, 42, .06); --nc-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10); --nc-shadow-xl: 0 20px 60px rgba(15, 23, 42, .15); /* Sidebar */ --nc-sb-bg: #0f172a; --nc-sb-bg-2: #1e293b; --nc-sb-text: #cbd5e1; --nc-sb-text-dim: #64748b; --nc-sb-active-bg: rgba(37, 99, 235, .15); --nc-sb-active-fg: #60a5fa; --nc-sb-hover-bg: rgba(255, 255, 255, .04); /* Topbar */ --nc-topbar-h: 56px; --nc-sb-w: 240px; --nc-sb-w-mobile: 280px; /* Animation */ --nc-ease: cubic-bezier(.4, 0, .2, 1); --nc-duration: 180ms; } /* Dark mode */ [data-theme="dark"] { --nc-bg: #0b1220; --nc-surface: #111827; --nc-surface-2: #1f2937; --nc-border: #1f2937; --nc-border-strong: #374151; --nc-text-1: #f1f5f9; --nc-text-2: #cbd5e1; --nc-text-3: #94a3b8; --nc-accent-50: #1e293b; --nc-success-50: #064e3b; --nc-warning-50: #78350f; --nc-danger-50: #7f1d1d; --nc-info-50: #0c4a6e; --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --nc-shadow: 0 4px 12px rgba(0, 0, 0, .35); --nc-shadow-lg: 0 10px 30px rgba(0, 0, 0, .50); --nc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .60); --nc-sb-bg: #050912; --nc-sb-bg-2: #0b1220; --nc-sb-active-bg: rgba(37, 99, 235, .20); --nc-sb-hover-bg: rgba(255, 255, 255, .03); } /* Honour OS preference on first paint if no manual theme set yet */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --nc-bg: #0b1220; --nc-surface: #111827; --nc-surface-2: #1f2937; --nc-border: #1f2937; --nc-text-1: #f1f5f9; --nc-text-2: #cbd5e1; --nc-text-3: #94a3b8; --nc-accent-50: #1e293b; --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --nc-shadow: 0 4px 12px rgba(0, 0, 0, .35); --nc-sb-bg: #050912; } }