initial

ts_web/elements/00fonts.ts

@@ -0,0 +1,35 @@
+/**
+ * Font definitions for the mobile catalog
+ */
+
+// System font stack optimized for mobile
+export const systemFontStack = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
+
+// Mono font stack
+export const monoFontStack = `ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
+
+// Font sizes (following mobile-first approach)
+export const fontSizes = {
+  xs: '0.75rem',    // 12px
+  sm: '0.875rem',   // 14px
+  base: '1rem',     // 16px (prevents iOS zoom on inputs)
+  lg: '1.125rem',   // 18px
+  xl: '1.25rem',    // 20px
+  '2xl': '1.5rem',  // 24px
+  '3xl': '1.875rem', // 30px
+};
+
+// Font weights
+export const fontWeights = {
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+};
+
+// Line heights
+export const lineHeights = {
+  tight: '1.2',
+  normal: '1.5',
+  relaxed: '1.75',
+};