feat: define typography tokens

src/index.css

@@ -12,7 +12,10 @@
 
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  font-weight: var(--font-weight-regular);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--surface-base);

src/styles/tokens.css

@@ -33,6 +33,29 @@
   --message-assistant-border: #9c27b0;
   --message-tool-bg: #f8f9fa;
   --message-tool-border: #6c757d;
+  
+  /* Typography tokens */
+  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  
+  /* Font weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* Font sizes */
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
 }
 
 [data-theme="dark"] {
@@ -70,4 +93,27 @@
   --message-assistant-border: #ba68c8;
   --message-tool-bg: #212529;
   --message-tool-border: #adb5bd;
+  
+  /* Typography tokens (same as light theme) */
+  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  
+  /* Font weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* Font sizes */
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
 }

tailwind.config.js

@@ -5,7 +5,29 @@ export default {
     extend: {
       colors: {},
       spacing: {},
-      fontSize: {},
+      fontSize: {
+        'xs': ['var(--font-size-xs)', { lineHeight: 'var(--line-height-normal)' }],
+        'sm': ['var(--font-size-sm)', { lineHeight: 'var(--line-height-normal)' }],
+        'base': ['var(--font-size-base)', { lineHeight: 'var(--line-height-normal)' }],
+        'lg': ['var(--font-size-lg)', { lineHeight: 'var(--line-height-tight)' }],
+        'xl': ['var(--font-size-xl)', { lineHeight: 'var(--line-height-tight)' }],
+        '2xl': ['var(--font-size-2xl)', { lineHeight: 'var(--line-height-tight)' }],
+        'body': ['var(--font-size-base)', { lineHeight: 'var(--line-height-normal)' }],
+        'label': ['var(--font-size-sm)', { lineHeight: 'var(--line-height-normal)' }],
+        'heading': ['var(--font-size-lg)', { lineHeight: 'var(--line-height-tight)' }],
+      },
+      fontFamily: {
+        'sans': ['var(--font-family-sans)', 'system-ui', 'sans-serif'],
+        'mono': ['var(--font-family-mono)', 'monospace'],
+        'body': ['var(--font-family-sans)', 'system-ui', 'sans-serif'],
+        'heading': ['var(--font-family-sans)', 'system-ui', 'sans-serif'],
+      },
+      fontWeight: {
+        'regular': 'var(--font-weight-regular)',
+        'medium': 'var(--font-weight-medium)',
+        'semibold': 'var(--font-weight-semibold)',
+        'bold': 'var(--font-weight-bold)',
+      },
       borderRadius: {},
       boxShadow: {},
     },