/** * tokens.css — @ntwin/kit * * Single source of truth on the code side. Mirrors: * - the Figma Variables collections nsfx-color, nsfx-type, nsfx-layout (in kit.fig) * - BRAND.md (human-readable) * - schemas/registry.json (machine-readable, used by check-schema.ts) * * Token naming convention: --nsfx--(-). * Values are in OKLCH for color, rem/px for size, milliseconds for motion. */ :root { color-scheme: light dark; /* -------------------------------------------------------------------- */ /* Typography */ /* -------------------------------------------------------------------- */ --nsfx-font-display: "Source Serif 4", "GT Sectra", "Tiempos Text", Georgia, serif; --nsfx-font-text: "Geist", "Inter Display", "Helvetica Neue", system-ui, sans-serif; --nsfx-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --nsfx-text-xs: 0.6875rem; --nsfx-text-sm: 0.8125rem; --nsfx-text-base: 0.9375rem; --nsfx-text-md: 1rem; --nsfx-text-lg: 1.125rem; --nsfx-text-xl: 1.5rem; --nsfx-text-display: 2rem; --nsfx-leading-xs: 1.27; --nsfx-leading-sm: 1.23; --nsfx-leading-base: 1.47; --nsfx-leading-md: 1.5; --nsfx-leading-lg: 1.45; --nsfx-leading-xl: 1.25; --nsfx-leading-display: 1.15; /* -------------------------------------------------------------------- */ /* Accent (Committed — default Indigo, 8 presets via --nsfx-accent-h) */ /* -------------------------------------------------------------------- */ --nsfx-accent-h: 275; --nsfx-accent-surface: oklch(0.9 0.11 var(--nsfx-accent-h)); --nsfx-accent-emphasis: oklch(0.48 0.14 var(--nsfx-accent-h)); --nsfx-accent-muted: oklch(0.94 0.04 var(--nsfx-accent-h)); --nsfx-danger: oklch(0.58 0.180 25); --nsfx-warning: oklch(0.78 0.135 85); /* -------------------------------------------------------------------- */ /* Neutrals (tinted to --nsfx-accent-h) */ /* Light mode defaults. Dark mode overrides below. */ /* -------------------------------------------------------------------- */ --nsfx-neutral-1: oklch(0.99 0.006 var(--nsfx-accent-h)); --nsfx-neutral-2: oklch(0.97 0.01 var(--nsfx-accent-h)); --nsfx-neutral-3: oklch(0.925 0.012 var(--nsfx-accent-h)); --nsfx-neutral-4: oklch(0.865 0.016 var(--nsfx-accent-h)); --nsfx-neutral-5: oklch(0.745 0.018 var(--nsfx-accent-h)); --nsfx-neutral-6: oklch(0.605 0.02 var(--nsfx-accent-h)); --nsfx-neutral-7: oklch(0.465 0.02 var(--nsfx-accent-h)); --nsfx-neutral-8: oklch(0.325 0.02 var(--nsfx-accent-h)); --nsfx-neutral-9: oklch(0.2 0.02 var(--nsfx-accent-h)); --nsfx-neutral-10: oklch(0.14 0.018 var(--nsfx-accent-h)); /* -------------------------------------------------------------------- */ /* Bubble */ /* -------------------------------------------------------------------- */ --nsfx-bubble-radius: 14px; --nsfx-bubble-sent-radius: 18px; --nsfx-bubble-corner-tail: 6px; --nsfx-bubble-padding-y: 8px; --nsfx-bubble-padding-x: 12px; --nsfx-bubble-max-width: min(75%, 480px); --nsfx-bubble-max-width-sent: min(28rem, 88%); --nsfx-bubble-open-fill: transparent; --nsfx-bubble-sent-fill: var(--nsfx-accent-surface); --nsfx-bubble-sent-text: var(--nsfx-neutral-10); --nsfx-bubble-received-fill: var(--nsfx-neutral-2); --nsfx-bubble-received-text: var(--nsfx-neutral-9); --nsfx-bubble-system-fill: transparent; --nsfx-bubble-system-text: var(--nsfx-neutral-6); --nsfx-bubble-boundary-fill: var(--nsfx-accent-muted); --nsfx-bubble-boundary-text: var(--nsfx-neutral-9); --nsfx-bubble-handoff-fill: var(--nsfx-warning); --nsfx-bubble-handoff-text: var(--nsfx-neutral-10); /* -------------------------------------------------------------------- */ /* Canvas */ /* -------------------------------------------------------------------- */ --nsfx-canvas-bg: var(--nsfx-neutral-1); --nsfx-canvas-well-bg: var(--nsfx-neutral-1); --nsfx-canvas-well-bg-2: var(--nsfx-neutral-2); --nsfx-canvas-well-border: var(--nsfx-neutral-3); --nsfx-canvas-padding: 16px; --nsfx-canvas-max-width: 720px; /* -------------------------------------------------------------------- */ /* Spacing (chat density) */ /* -------------------------------------------------------------------- */ --nsfx-space-bubble-intra: 4px; --nsfx-space-bubble-group: 8px; --nsfx-space-message-stack: 22px; --nsfx-space-group-gap: 8px; --nsfx-space-day-gap: 24px; /* -------------------------------------------------------------------- */ /* Message layout (open assistant rhythm — D-051) */ /* -------------------------------------------------------------------- */ --nsfx-message-open-gap: 5px; --nsfx-message-label-size: 0.625rem; /* -------------------------------------------------------------------- */ /* Composer dock (single-shell rhythm — D-051) */ /* -------------------------------------------------------------------- */ --nsfx-composer-radius: 18px; --nsfx-composer-padding-x: 16px; --nsfx-composer-padding-y: 14px; --nsfx-composer-border: 1px solid var(--nsfx-neutral-3); --nsfx-composer-toolbar-gap: 10px; --nsfx-composer-submit-size: 34px; /* -------------------------------------------------------------------- */ /* Status ticks */ /* -------------------------------------------------------------------- */ --nsfx-tick-sent: var(--nsfx-neutral-6); --nsfx-tick-delivered: var(--nsfx-neutral-6); --nsfx-tick-read: var(--nsfx-accent-emphasis); /* -------------------------------------------------------------------- */ /* Authoring card */ /* -------------------------------------------------------------------- */ --nsfx-card-bg: var(--nsfx-neutral-1); --nsfx-card-border: 1px solid var(--nsfx-neutral-3); --nsfx-card-radius: 12px; --nsfx-card-padding: 20px; --nsfx-card-gap: 12px; --nsfx-card-label: var(--nsfx-neutral-7); --nsfx-card-value: var(--nsfx-neutral-9); --nsfx-card-placeholder: var(--nsfx-neutral-5); --nsfx-card-tip-bg: var(--nsfx-accent-muted); --nsfx-card-tip-text: var(--nsfx-neutral-8); /* -------------------------------------------------------------------- */ /* Chrome (header / input / shell geometry) */ /* -------------------------------------------------------------------- */ --nsfx-chrome-bar-padding-y: 12px; --nsfx-chrome-avatar-size: 36px; --nsfx-chrome-pill-radius: 9999px; --nsfx-chrome-gap-sm: 8px; --nsfx-chrome-gap-md: 12px; --nsfx-chrome-shell-radius: 20px; --nsfx-setup-icon-size: 32px; --nsfx-live-dot-size: 6px; /* -------------------------------------------------------------------- */ /* Motion — exponential ease-out only (no overshoot, no bounce). */ /* These curves decelerate naturally, the way real physical objects do. */ /* -------------------------------------------------------------------- */ --nsfx-spring-quick: cubic-bezier(0.25, 1, 0.5, 1) 180ms; /* ease-out-quart */ --nsfx-spring-base: cubic-bezier(0.22, 1, 0.36, 1) 240ms; /* ease-out-quint */ --nsfx-spring-soft: cubic-bezier(0.16, 1, 0.3, 1) 360ms; /* ease-out-expo */ } /* Dark mode — only neutrals and bubble fills shift; geometry stays. */ @media (prefers-color-scheme: dark) { :root { --nsfx-accent-surface: oklch(0.32 0.09 var(--nsfx-accent-h)); --nsfx-accent-emphasis: oklch(0.78 0.16 var(--nsfx-accent-h)); --nsfx-accent-muted: oklch(0.28 0.04 var(--nsfx-accent-h)); --nsfx-canvas-well-bg: oklch(0.088 0.008 var(--nsfx-accent-h)); --nsfx-canvas-well-bg-2: oklch(0.112 0.01 var(--nsfx-accent-h)); --nsfx-neutral-1: oklch(0.17 0.014 var(--nsfx-accent-h)); --nsfx-neutral-2: oklch(0.22 0.016 var(--nsfx-accent-h)); --nsfx-neutral-3: oklch(0.28 0.018 var(--nsfx-accent-h)); --nsfx-neutral-4: oklch(0.38 0.02 var(--nsfx-accent-h)); --nsfx-neutral-5: oklch(0.55 0.02 var(--nsfx-accent-h)); --nsfx-neutral-6: oklch(0.68 0.018 var(--nsfx-accent-h)); --nsfx-neutral-7: oklch(0.78 0.015 var(--nsfx-accent-h)); --nsfx-neutral-8: oklch(0.88 0.012 var(--nsfx-accent-h)); --nsfx-neutral-9: oklch(0.92 0.01 var(--nsfx-accent-h)); --nsfx-neutral-10: oklch(0.97 0.008 var(--nsfx-accent-h)); --nsfx-danger: oklch(0.70 0.170 25); } } /* Explicit data-theme override (lets apps force a theme regardless of OS). */ [data-theme="dark"] { color-scheme: dark; --nsfx-accent-surface: oklch(0.32 0.09 var(--nsfx-accent-h)); --nsfx-accent-emphasis: oklch(0.78 0.16 var(--nsfx-accent-h)); --nsfx-accent-muted: oklch(0.28 0.04 var(--nsfx-accent-h)); --nsfx-canvas-well-bg: oklch(0.088 0.008 var(--nsfx-accent-h)); --nsfx-canvas-well-bg-2: oklch(0.112 0.01 var(--nsfx-accent-h)); --nsfx-neutral-1: oklch(0.17 0.014 var(--nsfx-accent-h)); --nsfx-neutral-2: oklch(0.22 0.016 var(--nsfx-accent-h)); --nsfx-neutral-3: oklch(0.28 0.018 var(--nsfx-accent-h)); --nsfx-neutral-4: oklch(0.38 0.02 var(--nsfx-accent-h)); --nsfx-neutral-5: oklch(0.55 0.02 var(--nsfx-accent-h)); --nsfx-neutral-6: oklch(0.68 0.018 var(--nsfx-accent-h)); --nsfx-neutral-7: oklch(0.78 0.015 var(--nsfx-accent-h)); --nsfx-neutral-8: oklch(0.88 0.012 var(--nsfx-accent-h)); --nsfx-neutral-9: oklch(0.92 0.01 var(--nsfx-accent-h)); --nsfx-neutral-10: oklch(0.97 0.008 var(--nsfx-accent-h)); --nsfx-danger: oklch(0.70 0.170 25); } [data-theme="light"] { color-scheme: light; --nsfx-accent-surface: oklch(0.9 0.11 var(--nsfx-accent-h)); --nsfx-accent-emphasis: oklch(0.48 0.14 var(--nsfx-accent-h)); --nsfx-accent-muted: oklch(0.94 0.04 var(--nsfx-accent-h)); --nsfx-neutral-1: oklch(0.99 0.006 var(--nsfx-accent-h)); --nsfx-neutral-2: oklch(0.97 0.01 var(--nsfx-accent-h)); --nsfx-neutral-3: oklch(0.925 0.012 var(--nsfx-accent-h)); --nsfx-neutral-4: oklch(0.865 0.016 var(--nsfx-accent-h)); --nsfx-neutral-5: oklch(0.745 0.018 var(--nsfx-accent-h)); --nsfx-neutral-6: oklch(0.605 0.02 var(--nsfx-accent-h)); --nsfx-neutral-7: oklch(0.465 0.02 var(--nsfx-accent-h)); --nsfx-neutral-8: oklch(0.325 0.02 var(--nsfx-accent-h)); --nsfx-neutral-9: oklch(0.2 0.02 var(--nsfx-accent-h)); --nsfx-neutral-10: oklch(0.14 0.018 var(--nsfx-accent-h)); --nsfx-danger: oklch(0.58 0.180 25); } @media (prefers-reduced-motion: reduce) { :root { --nsfx-spring-quick: opacity 120ms linear; --nsfx-spring-base: opacity 120ms linear; --nsfx-spring-soft: opacity 120ms linear; } }