/* ========================================================================== Nodebench · Design tokens Single source of truth. Same keys mirror in /handoff/tokens.json. Override at the :root level or via [data-theme="light"]. ========================================================================== */ :root { /* --- color · neutrals (dark-first) ------------------------------------ */ --nb-bg: #0E0F12; --nb-bg-raised: #16181D; --nb-bg-panel: #101216; --nb-bg-input: #1A1D23; --nb-line: #23262D; --nb-line-soft: #1B1E24; --nb-text: #E6E7EA; --nb-text-dim: #B6BAC2; --nb-fog: #9BA0A8; --nb-mute: #5A5F6A; /* --- color · accent (warm amber, the only brand color) ---------------- */ --nb-amber: #D98E3C; --nb-amber-deep: #B8732A; --nb-amber-soft: #E8A866; --nb-amber-wash: rgba(217, 142, 60, 0.10); --nb-amber-halo: rgba(217, 142, 60, 0.18); /* --- color · signal --------------------------------------------------- */ --nb-red: #D9614A; --nb-green: #6FA864; --nb-blue: #6B8DC2; /* --- radii ------------------------------------------------------------ */ --nb-r-xs: 3px; --nb-r-sm: 4px; --nb-r-md: 6px; --nb-r-lg: 8px; --nb-r-xl: 10px; --nb-r-pill: 999px; /* --- spacing scale (4px base) ---------------------------------------- */ --nb-s-0: 0; --nb-s-1: 4px; --nb-s-2: 8px; --nb-s-3: 12px; --nb-s-4: 16px; --nb-s-5: 20px; --nb-s-6: 24px; --nb-s-7: 32px; --nb-s-8: 40px; --nb-s-9: 48px; --nb-s-10: 64px; /* --- typography ------------------------------------------------------- */ --nb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --nb-fs-10: 10px; --nb-fs-11: 11px; --nb-fs-12: 12px; --nb-fs-13: 13px; --nb-fs-14: 14px; --nb-fs-16: 16px; --nb-fs-20: 20px; --nb-fs-24: 24px; --nb-fs-32: 32px; --nb-fs-56: 56px; --nb-lh-tight: 1.15; --nb-lh-snug: 1.35; --nb-lh-body: 1.55; --nb-tracking-tight: -0.025em; --nb-tracking-mono: 0.06em; --nb-tracking-caption: 0.14em; /* --- shadows ---------------------------------------------------------- */ --nb-shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.25); --nb-shadow-2: 0 8px 24px rgba(0,0,0,0.35); --nb-shadow-3: 0 16px 40px rgba(0,0,0,0.45); --nb-shadow-selected: 0 0 0 3px var(--nb-amber-halo), var(--nb-shadow-2); --nb-shadow-error: 0 0 0 3px rgba(217, 97, 74, 0.18), var(--nb-shadow-2); /* --- motion ----------------------------------------------------------- */ --nb-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --nb-ease-out: cubic-bezier(0, 0, 0.2, 1); --nb-dur-1: 120ms; --nb-dur-2: 180ms; --nb-dur-3: 260ms; --nb-dur-flow: 2400ms; /* particle traveling on an edge */ /* --- z-index --------------------------------------------------------- */ --nb-z-canvas: 1; --nb-z-nodes: 2; --nb-z-overlay: 50; --nb-z-menu: 60; --nb-z-modal: 70; --nb-z-toast: 80; /* --- layout widths --------------------------------------------------- */ --nb-sidebar-w: 232px; --nb-details-w: 320px; --nb-topbar-h: 44px; --nb-node-w: 220px; --nb-node-h: 84px; } /* ========================================================================== Light theme — warm paper, deeper amber. Trigger with: or let prefers-color-scheme flip it (see theme.css). ========================================================================== */ [data-theme="light"] { --nb-bg: #F6F5F2; --nb-bg-raised: #FFFFFF; --nb-bg-panel: #EFEDE7; --nb-bg-input: #FFFFFF; --nb-line: #DAD7CF; --nb-line-soft: #E7E4DC; --nb-text: #15171B; --nb-text-dim: #3C414A; --nb-fog: #6B6F78; --nb-mute: #9A9EA6; --nb-amber: #B8732A; --nb-amber-deep: #8C5718; --nb-amber-soft: #D98E3C; --nb-amber-wash: rgba(184, 115, 42, 0.08); --nb-amber-halo: rgba(184, 115, 42, 0.18); --nb-shadow-1: 0 1px 2px rgba(20, 23, 27, 0.05); --nb-shadow-2: 0 8px 24px rgba(20, 23, 27, 0.08); --nb-shadow-3: 0 16px 40px rgba(20, 23, 27, 0.12); }