style: Inter with tabular figures, Firefly inks, higher contrast

src/routes/layout.css

@@ -3,17 +3,18 @@
 @import "shadcn-svelte/tailwind.css";
 
 @import "./claddcn.css";
+@import "@fontsource-variable/inter/index.css";
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --ff-brand: oklch(0.57 0.105 240);
-  --ff-brand-deep: oklch(0.5 0.1 240);
-  --ff-on-brand: oklch(0.99 0.01 240);
-  --ff-income: oklch(0.5 0.12 145);
-  --ff-expense: oklch(0.52 0.15 28);
-  --ff-transfer: oklch(0.5 0.085 225);
-  --ff-warn: oklch(0.62 0.14 70);
-  --ff-row-hover: oklch(0.96 0.012 240);
+  --ff-brand: oklch(0.6 0.1 240);
+  --ff-brand-deep: oklch(0.52 0.095 240);
+  --ff-on-brand: oklch(0.995 0 0);
+  --ff-income: oklch(0.53 0.14 152);
+  --ff-expense: oklch(0.56 0.18 30);
+  --ff-transfer: oklch(0.52 0.1 240);
+  --ff-warn: oklch(0.6 0.14 65);
+  --ff-row-hover: oklch(0.965 0.01 240);
   --ff-row-cursor: oklch(0.93 0.03 240);
   --ff-row-selected: oklch(0.9 0.05 240);
   --ff-series-1: #1777b8;
@@ -27,11 +28,15 @@
 }
 
 :root:not(.dark) {
-  --cladd-bg: oklch(0.955 0.007 240);
+  --cladd-bg: oklch(0.95 0.008 240);
   --cladd-surface: oklch(1 0 0);
   --cladd-surface-cut: oklch(0.955 0.005 240);
-  --cladd-bg-outline: oklch(0.88 0.008 240);
-  --cladd-outline: oklch(0.9 0.008 240);
+  --cladd-bg-outline: oklch(0.87 0.008 240);
+  --cladd-outline: oklch(0.89 0.008 240);
+  --cladd-fg: oklch(0.22 0.01 250);
+  --cladd-fg-soft: oklch(0.42 0.012 250);
+  --cladd-fg-softer: oklch(0.55 0.012 250);
+  --cladd-fg-softest: oklch(0.7 0.01 250);
   --ring: var(--ff-brand);
 }
 
@@ -40,28 +45,40 @@
 }
 
 .dark {
+  --cladd-bg: oklch(0.2 0.012 250);
+  --cladd-surface: oklch(0.25 0.014 250);
+  --cladd-surface-cut: oklch(0.215 0.012 250);
+  --cladd-bg-outline: oklch(0.3 0.014 250);
+  --cladd-outline: oklch(0.34 0.016 250);
+  --cladd-fg: oklch(0.96 0.004 250);
+  --cladd-fg-soft: oklch(0.8 0.01 250);
+  --cladd-fg-softer: oklch(0.67 0.012 250);
+  --cladd-fg-softest: oklch(0.52 0.012 250);
   --ring: var(--ff-series-1);
-  --ff-brand: oklch(0.42 0.085 240);
-  --ff-brand-deep: oklch(0.36 0.075 240);
-  --ff-on-brand: oklch(0.97 0.01 240);
-  --ff-income: oklch(0.78 0.15 140);
-  --ff-expense: oklch(0.76 0.1 35);
-  --ff-transfer: oklch(0.76 0.08 220);
-  --ff-warn: oklch(0.8 0.13 80);
-  --ff-row-hover: oklch(0.25 0.012 240);
-  --ff-row-cursor: oklch(0.29 0.03 240);
-  --ff-row-selected: oklch(0.33 0.06 240);
-  --ff-series-1: #348dcf;
-  --ff-series-2: #d5753a;
-  --ff-series-3: #0f9b89;
-  --ff-series-4: #b68b16;
-  --ff-series-5: #cd6199;
-  --ff-series-6: #4e943e;
-  --ff-series-7: #876cca;
-  --ff-series-8: #c44844;
+  --ff-brand: oklch(0.5 0.1 240);
+  --ff-brand-deep: oklch(0.44 0.09 240);
+  --ff-on-brand: oklch(0.995 0 0);
+  --ff-income: oklch(0.77 0.17 152);
+  --ff-expense: oklch(0.72 0.17 28);
+  --ff-transfer: oklch(0.77 0.1 235);
+  --ff-warn: oklch(0.82 0.14 80);
+  --ff-row-hover: oklch(0.29 0.014 250);
+  --ff-row-cursor: oklch(0.32 0.035 245);
+  --ff-row-selected: oklch(0.36 0.06 245);
+  --ff-series-1: #4a9ad6;
+  --ff-series-2: #e0834a;
+  --ff-series-3: #1fae9a;
+  --ff-series-4: #c99d2a;
+  --ff-series-5: #d872a6;
+  --ff-series-6: #5ea84d;
+  --ff-series-7: #9580d6;
+  --ff-series-8: #d65a55;
 }
 
 @theme inline {
+  --font-sans:
+    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
+    sans-serif;
   --color-brand: var(--ff-brand);
   --color-brand-deep: var(--ff-brand-deep);
   --color-on-brand: var(--ff-on-brand);
@@ -79,10 +96,15 @@
     @apply border-border outline-ring/50;
   }
   html {
+    scroll-padding-top: 3.75rem;
+    scroll-padding-bottom: 0.75rem;
     scrollbar-color: var(--cladd-fg-softest) transparent;
   }
   body {
+    font-family: var(--font-sans);
     font-size: 13px;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
     line-height: 1.45;
     @apply bg-background text-foreground;
   }
@@ -102,9 +124,7 @@
 }
 
 @utility num {
-  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  letter-spacing: -0.01em;
   white-space: nowrap;
 }