/* Auto-generated notelett tokens from bytelyst.tokens.json — do not edit manually */ :root { --nl-bg-canvas: #06070A; --nl-bg-elevated: #0E1118; --nl-surface-card: #121725; --nl-surface-muted: #1A2335; --nl-border-default: rgba(255,255,255,0.12); --nl-border-strong: rgba(255,255,255,0.22); --nl-text-primary: #EFF4FF; --nl-text-secondary: #A5B1C7; --nl-text-tertiary: #6C7C98; --nl-accent-primary: #5A8CFF; --nl-accent-secondary: #2EE6D6; --nl-success: #34D399; --nl-warning: #F59E0B; --nl-danger: #FF6E6E; --nl-focus-ring: rgba(90,140,255,0.45); --nl-overlay-scrim: rgba(5,8,18,0.72); /* notelett product colors */ --nl-bg-canvas: #06070A; --nl-bg-elevated: #0E1118; --nl-surface-card: #121725; --nl-surface-muted: #1A2335; --nl-accent-primary: #5A8CFF; --nl-accent-secondary: #2EE6D6; --nl-success: #34D399; --nl-warning: #F59E0B; --nl-danger: #FF6E6E; --nl-focus-ring: #5A8CFF; --nl-agent-action: #A66BFF; --nl-draft-note: #FFD166; --nl-linked-note: #2EE6D6; --nl-task-pending: #F59E0B; --nl-task-complete: #34D399; --nl-font-display: "Space Grotesk", "SF Pro Display", sans-serif; --nl-font-body: "DM Sans", "SF Pro Text", sans-serif; --nl-font-mono: "IBM Plex Mono", "SF Mono", monospace; --nl-fs-xs: 12px; --nl-fs-sm: 14px; --nl-fs-md: 16px; --nl-fs-lg: 18px; --nl-fs-xl: 22px; --nl-fs-2xl: 28px; --nl-fs-3xl: 36px; --nl-space-0: 0; --nl-space-1: 4px; --nl-space-2: 8px; --nl-space-3: 12px; --nl-space-4: 16px; --nl-space-5: 20px; --nl-space-6: 24px; --nl-space-7: 28px; --nl-space-8: 32px; --nl-space-10: 40px; --nl-space-12: 48px; --nl-space-16: 64px; --nl-radius-xs: 8px; --nl-radius-sm: 12px; --nl-radius-md: 16px; --nl-radius-lg: 20px; --nl-radius-xl: 24px; --nl-radius-pill: 999px; --nl-elevation-sm: 0 4px 12px rgba(0,0,0,0.12); --nl-elevation-md: 0 12px 28px rgba(0,0,0,0.18); --nl-elevation-lg: 0 20px 48px rgba(0,0,0,0.24); --nl-motion-fast: 140ms; --nl-motion-base: 220ms; --nl-motion-slow: 320ms; --nl-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1); /* ── @bytelyst/ui alias layer (--bl-* → --nl-*) ──────────────── */ --bl-bg-canvas: var(--nl-bg-canvas); --bl-bg-elevated: var(--nl-bg-elevated); --bl-surface-card: var(--nl-surface-card); --bl-surface-muted: var(--nl-surface-muted); --bl-surface-highlight: color-mix(in oklab, var(--nl-surface-muted) 82%, white); --bl-surface-overlay: color-mix(in oklab, var(--nl-bg-canvas) 88%, transparent); --bl-input: color-mix(in oklab, var(--nl-surface-muted) 76%, var(--nl-bg-canvas)); --bl-border: var(--nl-border-default); --bl-border-strong: var(--nl-border-strong); --bl-border-subtle: color-mix(in oklab, var(--nl-border-default) 62%, transparent); --bl-text-primary: var(--nl-text-primary); --bl-text-secondary: var(--nl-text-secondary); --bl-text-tertiary: var(--nl-text-tertiary); --bl-text-quiet: color-mix(in oklab, var(--nl-text-secondary) 78%, var(--nl-bg-canvas)); --bl-accent: var(--nl-accent-primary); --bl-accent-foreground: var(--nl-bg-canvas); --bl-accent-muted: color-mix(in oklab, var(--nl-accent-primary) 16%, transparent); --bl-info: var(--nl-accent-primary); --bl-info-muted: color-mix(in oklab, var(--nl-accent-primary) 14%, transparent); --bl-success: var(--nl-success); --bl-success-muted: color-mix(in oklab, var(--nl-success) 14%, transparent); --bl-warning: var(--nl-warning); --bl-warning-muted: color-mix(in oklab, var(--nl-warning) 14%, transparent); --bl-danger: var(--nl-danger); --bl-danger-muted: color-mix(in oklab, var(--nl-danger) 14%, transparent); --bl-danger-foreground: var(--nl-bg-canvas); --bl-focus-ring: var(--nl-focus-ring); --bl-focus-ring-muted: color-mix(in oklab, var(--nl-accent-primary) 18%, transparent); --bl-overlay-scrim: var(--nl-overlay-scrim); } [data-theme="light"] { --nl-bg-canvas: #F6F8FC; --nl-bg-elevated: #EEF2FA; --nl-surface-card: #FFFFFF; --nl-surface-muted: #F3F5FA; --nl-border-default: rgba(14,19,32,0.12); --nl-border-strong: rgba(14,19,32,0.24); --nl-text-primary: #0E1320; --nl-text-secondary: #55637A; --nl-success: #13956A; --nl-warning: #B87504; --nl-danger: #D24242; --nl-focus-ring: rgba(90,140,255,0.35); --nl-overlay-scrim: rgba(10,13,23,0.5); }