feat(docs): add progress dashboard components and styling

apps/docs/theme.css

@@ -0,0 +1,71 @@
+/*
+ * shadcn/ui tokens on top of Blume's theme. Blume (Tailwind v4) already maps
+ * background/foreground/muted/border onto its --blume-* tokens; this adds the
+ * names shadcn components expect, pointed at the same tokens so the progress
+ * cards follow the site in both colour schemes. Blume inlines this file into
+ * its Tailwind entry and switches dark mode with [data-theme="dark"], not
+ * shadcn's .dark class.
+ *
+ * Deliberately NOT remapped: `accent`. In Blume it is the brand colour
+ * (bg-accent), in shadcn a subtle hover surface; the vendored components here
+ * never use it.
+ */
+
+:root {
+  /* Difficulty hues, LeetCode's: easy teal, medium amber, hard red. */
+  --chart-1: oklch(0.72 0.12 195);
+  --chart-2: oklch(0.8 0.16 80);
+  --chart-3: oklch(0.63 0.22 25);
+  /* Solved fill for the topic bubbles. */
+  --chart-4: oklch(0.72 0.17 150);
+  --chart-5: oklch(0.6 0.12 250);
+  /* Heatmap ramp — the GREENS of apps/api/src/charts.ts (README + email), with
+     level 0 on the theme's muted surface so an empty day reads in light mode. */
+  --heat-0: var(--blume-muted);
+  --heat-1: #9be9a8;
+  --heat-2: #40c463;
+  --heat-3: #30a14e;
+  --heat-4: #216e39;
+}
+
+:root[data-theme="dark"] {
+  --chart-1: oklch(0.75 0.12 195);
+  --chart-2: oklch(0.83 0.16 80);
+  --chart-3: oklch(0.68 0.21 25);
+  --chart-4: oklch(0.76 0.17 150);
+  --chart-5: oklch(0.7 0.12 250);
+  --heat-0: var(--blume-muted);
+  --heat-1: #0e4429;
+  --heat-2: #006d32;
+  --heat-3: #26a641;
+  --heat-4: #39d353;
+}
+
+/* shadcn components draw `border` with no colour and rely on a global
+   `* { border-color: var(--border) }` base rule. Blume has none (its own
+   components always name border-border), so give shadcn's parts — every one
+   carries data-slot — that default, scoped, without touching Blume's. */
+@layer base {
+  [data-slot],
+  [data-slot] * {
+    border-color: var(--blume-border);
+  }
+}
+
+@theme inline {
+  --color-card: var(--blume-background);
+  --color-card-foreground: var(--blume-foreground);
+  --color-popover: var(--blume-background);
+  --color-popover-foreground: var(--blume-foreground);
+  --color-primary: var(--blume-foreground);
+  --color-primary-foreground: var(--blume-background);
+  --color-secondary: var(--blume-muted);
+  --color-secondary-foreground: var(--blume-foreground);
+  --color-input: var(--blume-border);
+  --color-ring: var(--blume-muted-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+}