/* ============================================================================= tokens.css — LlamaChat design system Direction: professional communication suite · LinkedIn-style · forest green ============================================================================= */ /* ============================================================================= LlamaChat design tokens — [data-theme] blocks Toggle with: document.documentElement.setAttribute('data-theme', 'dark') ============================================================================= */ [data-theme="light"] { --llc-bg: #f5f3fa; --llc-sidebar-bg: #ece8f6; --llc-surface: #ffffff; --llc-surface-hover: #f1eef9; --llc-surface-active: #e5dff5; --llc-border: #d2cbea; --llc-border-light: #e2ddf2; --llc-txt: #18132a; --llc-txt-2: #57496e; --llc-txt-3: #9a90b5; --llc-purple: #6a4fc4; --llc-purple-bg: #e2daf5; --llc-purple-dark: #3a2480; --llc-blue: #3d80aa; --llc-blue-bg: #cde3f2; --llc-blue-txt: #2c6e96; --llc-user-bubble: #ece8f8; --llc-user-border: #d2cae8; --llc-shadow-sm: 0 1px 3px rgba(20,10,40,.07); --llc-shadow-lg: 0 8px 36px rgba(20,10,40,.13); --llc-logo-color: #3a2480; --llc-input-bg: #ffffff; --llc-input-border: #cac2e5; --llc-focus-ring: rgba(106,79,196,.18); } [data-theme="dark"] { --llc-bg: #100d1a; --llc-sidebar-bg: #140f20; --llc-surface: #1b1530; --llc-surface-hover: #231c3c; --llc-surface-active: #2c2450; --llc-border: #332a52; --llc-border-light: #271f42; --llc-txt: #e8e2f8; --llc-txt-2: #8e7fb8; --llc-txt-3: #564a78; --llc-purple: #9878e0; --llc-purple-bg: #1e1638; --llc-purple-dark: #c0a8f0; --llc-blue: #5ba4cc; --llc-blue-bg: #142436; --llc-blue-txt: #70b8e0; --llc-user-bubble: #201844; --llc-user-border: #302260; --llc-shadow-sm: 0 1px 3px rgba(0,0,0,.35); --llc-shadow-lg: 0 8px 36px rgba(0,0,0,.55); --llc-logo-color: #c0a8f0; --llc-input-bg: #1b1530; --llc-input-border: #302860; --llc-focus-ring: rgba(152,120,224,.2); } /* ============================================================================= Legacy `:root` tokens — kept for pages not yet migrated to llc-* system ============================================================================= */ :root { /* --------------------------------------------------------------------------- PRIMITIVE PALETTE Raw color values — referenced only by semantic tokens below, not by components directly. --------------------------------------------------------------------------- */ /* Professional Green (primary scale — replaces blue) */ --blue-50: #F0FDF4; --blue-100: #DCFCE7; --blue-200: #BBF7D0; --blue-300: #86EFAC; --blue-400: #52B788; --blue-500: #40916C; --blue-600: #2D6A4F; --blue-700: #1B4332; --blue-800: #163B2A; --blue-900: #0D2B1D; /* Sage Green (accent scale — replaces teal) */ --teal-50: #F8FDF9; --teal-100: #E8F5EE; --teal-200: #C8E6D3; --teal-300: #95C9AA; --teal-400: #74B08F; --teal-500: #52967A; --teal-600: #3D7A5F; --teal-700: #2D5E47; --teal-800: #1E4333; --teal-900: #132D22; /* Neutral — blue-tinted slate (not warm gray) */ --neutral-0: #FFFFFF; --neutral-50: #F8FAFC; --neutral-100: #F1F5F9; --neutral-200: #E2E8F0; --neutral-300: #CBD5E1; --neutral-400: #94A3B8; --neutral-500: #64748B; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1E293B; --neutral-900: #0F172A; /* Status primitives */ --red-100: #FEE2E2; --red-500: #EF4444; --red-700: #B91C1C; --amber-100: #FEF3C7; --amber-500: #F59E0B; --amber-700: #B45309; --green-100: #DCFCE7; --green-500: #22C55E; --green-700: #15803D; --violet-600: #7C3AED; /* TTS badge — distinct from blue/teal */ /* --------------------------------------------------------------------------- SEMANTIC COLOR TOKENS What components should reference. Changing a primitive above propagates everywhere through these aliases. --------------------------------------------------------------------------- */ /* Backgrounds */ --color-bg-base: var(--neutral-50); /* page canvas */ --color-bg-surface: var(--neutral-0); /* cards, panels, modals */ --color-bg-subtle: var(--blue-50); /* hover trays, inactive tabs */ --color-bg-muted: var(--neutral-100); /* code blocks, readonly inputs */ --color-bg-inverse: var(--neutral-900); /* dark surfaces */ /* Borders */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-focus: var(--blue-600); /* Text / ink */ --color-ink: var(--neutral-900); /* primary body text */ --color-ink-secondary: var(--neutral-600); /* labels, metadata */ --color-ink-muted: var(--neutral-400); /* placeholders, disabled */ --color-ink-inverse: var(--neutral-0); /* text on dark surfaces */ --color-ink-link: var(--blue-600); /* Primary action — forest green */ --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700); --color-primary-subtle: var(--blue-100); --color-primary-text: var(--neutral-0); /* Accent — sage green */ --color-accent: var(--teal-600); --color-accent-hover: var(--teal-700); --color-accent-subtle: var(--teal-50); --color-accent-text: var(--neutral-0); /* Chat bubbles */ --color-bubble-user-bg: var(--blue-600); --color-bubble-user-text: var(--neutral-0); --color-bubble-bot-bg: var(--blue-50); --color-bubble-bot-text: var(--neutral-900); --color-bubble-code-bg: var(--neutral-100); --color-bubble-code-text: var(--neutral-800); --color-bubble-blockquote-border: var(--teal-300); --color-bubble-blockquote-text: var(--neutral-600); /* Status */ --color-success: var(--green-700); --color-success-subtle: var(--green-100); --color-warning: var(--amber-700); --color-warning-subtle: var(--amber-100); --color-danger: var(--red-700); --color-danger-subtle: var(--red-100); /* Service-type badge colors (Logs page) */ --color-badge-llm: var(--blue-600); --color-badge-tts: var(--violet-600); --color-badge-stt: var(--teal-600); --color-badge-embedding: var(--amber-500); /* Navbar — forest green */ --color-nav-bg: var(--blue-600); /* #2D6A4F */ --color-nav-text: var(--teal-200); /* #C8E6D3 — muted light green */ --color-nav-text-active: var(--neutral-0); --color-nav-border: var(--blue-700); /* #1B4332 */ /* Layout */ --nav-height: 3.5rem; /* 56px — matches LinkedIn's bar */ /* --------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ /* Font families */ --font-sans: "Source Sans 3", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace; /* Type scale — major third (×1.25) anchored at 16 px */ --text-xs: 0.75rem; /* 12px — fine print, timestamps */ --text-sm: 0.875rem; /* 14px — secondary labels, table data */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.125rem; /* 18px — card titles, subheadings */ --text-lg: 1.25rem; /* 20px — page section headers */ --text-xl: 1.5rem; /* 24px — page titles */ --text-2xl: 1.875rem; /* 30px — hero / empty-state headings */ --text-3xl: 2.25rem; /* 36px — marketing / splash */ /* Line heights */ --leading-tight: 1.25; /* headings */ --leading-snug: 1.375; /* subheadings */ --leading-normal: 1.5; /* body */ --leading-relaxed: 1.625; /* long-form prose */ /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.025em; /* large headings */ --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-widest: 0.1em; /* all-caps labels */ /* --------------------------------------------------------------------------- SPACING SCALE Base unit: 4 px (0.25 rem). Every step is a named multiple. --------------------------------------------------------------------------- */ --space-px: 1px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* --------------------------------------------------------------------------- SHAPE / BORDER RADIUS --------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px — chat bubbles */ --radius-full: 9999px; /* pills, avatars */ /* --------------------------------------------------------------------------- ELEVATION / SHADOWS Shadow color uses the darkest neutral (--neutral-900 = #0F172A). --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.10), 0 1px 2px -1px rgb(15 23 42 / 0.06); --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.06); --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.06); /* Focus ring */ --shadow-focus: 0 0 0 3px rgb(45 106 79 / 0.30); /* green-600 @ 30% */ /* --------------------------------------------------------------------------- MOTION --------------------------------------------------------------------------- */ --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* --------------------------------------------------------------------------- Z-INDEX SCALE --------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; }