fix: refine typography styles for improved readability and consistency

webapp/src/styles.css

@@ -810,6 +810,101 @@ h4 {
   background: transparent;
 }
 
+/* Typography refinement: stronger scan targets for dense vault/admin surfaces. */
+body {
+  font-family: var(--font-sans);
+  font-size: var(--font-base);
+  font-weight: 400;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.side-link,
+.side-group-trigger,
+.side-sub-link,
+.tree-btn,
+.mobile-settings-link,
+.backup-destination-item,
+.backup-browser-entry,
+.sort-menu-item,
+.create-menu-item,
+.nav-layout-option {
+  font-size: var(--font-sm);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.side-link.active,
+.side-group-trigger.active,
+.side-sub-link.active,
+.tree-btn.active,
+.mobile-tab.active,
+.mobile-settings-link.active,
+.nav-layout-option.active {
+  font-weight: 700;
+}
+
+.sidebar-title,
+.list-count,
+.field > span,
+.table th,
+.dialog-warning-kicker,
+.backup-recommendation-group-title {
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.list-title {
+  color: var(--text);
+  font-size: var(--font-base);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.list-sub,
+.detail-sub,
+.backup-destination-meta,
+.totp-code-username,
+.field-help,
+.settings-field-note {
+  font-size: var(--font-sm);
+  line-height: var(--leading-snug);
+}
+
+.btn,
+.input,
+.search-input,
+.user-chip,
+.network-status-badge {
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.btn-primary,
+.btn-danger,
+.btn.full,
+.topbar-actions .btn,
+.network-status-badge {
+  font-weight: 700;
+}
+
+.card h4,
+.settings-module h3,
+.section-head h3,
+.section-head h4,
+.detail-title,
+.totp-code-name,
+.backup-destination-name,
+.mobile-sidebar-title {
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
 .toast-item,
 .dialog-card {
   border-radius: var(--radius-lg);

webapp/src/styles/base.css

@@ -8,11 +8,12 @@ body,
   @apply m-0 h-full w-full p-0;
   color: var(--text);
   background: var(--bg-accent);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  font-family: var(--font-sans);
   font-size: var(--font-base);
   line-height: var(--leading-normal);
   letter-spacing: var(--tracking-normal);
-  font-feature-settings: 'liga' 1, 'kern' 1;
+  font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1;
+  font-variant-numeric: tabular-nums;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -33,8 +34,8 @@ body.dialog-open {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  letter-spacing: var(--tracking-tight);
+  font-weight: 700;
+  letter-spacing: 0;
   line-height: var(--leading-tight);
   margin: 0;
 }

webapp/src/styles/tokens.css

@@ -46,16 +46,22 @@
   --dur-slow: 350ms;
   --actions-gap: clamp(5px, calc((100vw - 520px) * 1), 10px);
 
+  /* Typography Families */
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei',
+    'Noto Sans CJK SC', 'Noto Sans SC', Arial, sans-serif;
+  --font-mono: 'SFMono-Regular', 'Cascadia Code', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
+
   /* Typography Scale */
   --font-xs: 11px;
-  --font-sm: 13px;
-  --font-base: 14px;
-  --font-md: 15px;
-  --font-lg: 16px;
-  --font-xl: 18px;
-  --font-2xl: 20px;
-  --font-3xl: 24px;
-  --font-4xl: 28px;
+  --font-sm: 14px;
+  --font-base: 15px;
+  --font-md: 16px;
+  --font-lg: 17px;
+  --font-xl: 19px;
+  --font-2xl: 21px;
+  --font-3xl: 25px;
+  --font-4xl: 29px;
 
   /* Line Heights */
   --leading-tight: 1.25;
@@ -65,11 +71,11 @@
   --leading-loose: 1.75;
 
   /* Letter Spacing */
-  --tracking-tighter: -0.02em;
-  --tracking-tight: -0.01em;
+  --tracking-tighter: 0;
+  --tracking-tight: 0;
   --tracking-normal: 0;
-  --tracking-wide: 0.01em;
-  --tracking-wider: 0.02em;
+  --tracking-wide: 0;
+  --tracking-wider: 0;
 
   /* Spacing Scale */
   --space-1: 4px;