/* ============================================================ Parker Design System — Colors + Typography Source of truth for all design artifacts. Values lifted from: client/src/index.css + tailwind.config.ts + harvey-design-tokens.ts + chat-v2/theme.ts ============================================================ */ /* ---------------------------------------- Fonts — loaded from Google Fonts CDN. Originals in the codebase: Bricolage Grotesque (display), DM Sans (body), JetBrains Mono (mono). Chat surfaces use system SF/Helvetica stack (no webfont) for a native feel. ---------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ========== TYPE ========== */ --font-display: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-body: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; --font-chat: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-chat-title: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'SF Pro Display', Arial, sans-serif; /* ========== CORE CANVAS ========== */ --canvas: #ffffff; /* pure white — main chat canvas */ --canvas-soft: #fafaf9; /* outer shell / body gradient start */ --canvas-warm: #fefefd; /* Harvey warm off-white (chat shell) */ --surface: #ffffff; --surface-warm: #fffefc; /* tinted card surface */ /* ========== INK (foreground scale) ========== */ --ink: #09090b; /* titles / strongest text */ --ink-1: #18181b; /* default body text */ --ink-2: #3f3f46; /* secondary */ --ink-3: #71717a; /* muted / helper */ --ink-4: #a1a1aa; /* placeholder / disabled */ --ink-harvey: #2B303B; /* chat body (warm slate) */ --ink-harvey-muted: #707885; /* ========== LINES / BORDERS ========== */ --line: #e8e8e6; /* default border */ --line-soft: #f2f2f0; /* subtle divider */ --line-warm: #e8e8e3; /* Harvey divider */ --hover: #f6f6f4; /* surface on hover */ /* ========== ACCENT (primary action) ========== */ --accent: #2563eb; /* primary blue (ChatV3 retarget) */ --accent-ink: #1d4ed8; /* pressed / hover */ --accent-soft: #eff6ff; /* wash / selection */ --accent-harvey: #385485; /* alt navy accent (Harvey chat) */ --accent-harvey-deep: #29385E; /* ========== SEMANTIC ========== */ --success: #16a34a; --success-bg: #f0fdf4; --success-border: #bbf7d0; --warning: #d97706; --warning-bg: #fffbeb; --warning-border: #fde68a; --danger: #dc2626; /* shadcn destructive */ --danger-bg: #fef2f2; --danger-border: #fecaca; --info: #2563eb; --info-bg: #eff6ff; /* Memory / AI accent (purple) — used on memory chips + agent avatars */ --memory: #7A54BA; --memory-deep: #5E3D94; /* ========== CHARTS ========== */ --chart-1: #3E5F8A; --chart-2: #638A73; --chart-3: #C78E43; --chart-4: #875E78; --chart-5: #4E7D86; --chart-6: #B95C3A; --chart-7: #5D73A8; --chart-8: #7B8D4C; /* ========== RADII ========== */ --radius-xs: 2px; --radius-sm: 4px; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-card: 28px; /* Harvey card */ --radius-panel: 30px; --radius-field: 18px; --radius-full: 9999px; /* ========== SHADOWS ========== */ --shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.08); --shadow: 0 8px 20px rgba(15, 23, 42, 0.08); --shadow-md: 0 12px 28px rgba(15, 23, 42, 0.10); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12); --shadow-card-harvey: 0 10px 24px rgba(43,48,59,0.045); --shadow-panel-harvey: 0 22px 52px rgba(43,48,59,0.12), 0 6px 18px rgba(43,48,59,0.04); --shadow-subtle-harvey: 0 3px 8px rgba(43,48,59,0.022); --shadow-app-shell: 0 0 0 1px rgba(9, 9, 11, 0.09), 0 6px 18px -6px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.04); /* ========== SPACING ========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ========== APP BACKGROUND ========== */ --app-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(20, 115, 255, 0.08), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(56, 189, 248, 0.08), transparent 55%), linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f9fbff 100%); } /* ============================================================ Semantic type classes — use these in artifacts. Matches client/src/index.css @layer components. ============================================================ */ html, body { font-family: var(--font-body); color: var(--ink-1); background: var(--canvas); font-feature-settings: "ss01", "ss02", "cv01", "cv02", "cv03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.01em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.02em; font-weight: 700; } .display { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; } .h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; } .h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; } .h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; } .h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; } .page-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; } .section-title { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.3; } .body-lg { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; } .body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-1); } .body-muted { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-3); } .helper { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--ink-3); } .label { font-family: var(--font-body); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } .label-xs { font-family: var(--font-body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); } .code { font-family: var(--font-mono); font-weight: 400; font-size: 12.5px; } /* Chat-native type (Harvey surfaces — native SF/Helvetica) */ .chat-title { font-family: var(--font-chat-title); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink-harvey); } .chat-body { font-family: var(--font-chat); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink-harvey); } .chat-sender { font-family: var(--font-chat); font-weight: 600; font-size: 12px; color: var(--ink-harvey-muted); } .chat-timestamp{ font-family: var(--font-chat); font-weight: 500; font-size: 11px; color: #8A909A; } .chat-eyebrow { font-family: var(--font-chat); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(112,120,133,0.88); }