css: remap blog tokens to blacksite, style footnotes+callouts

app/globals.css

@@ -86,6 +86,7 @@
   --color-signal-cyan: #00f0ff;
   --color-signal-orange: #ff5a1f;
   --color-signal-green: #b6ff00;
+  --color-signal-red: #ff3b30;
   --color-signal-violet: #805dff;
 }
 
@@ -102,7 +103,7 @@
     -moz-osx-font-smoothing: grayscale;
   }
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-sans);
+    font-family: var(--font-display);
     font-weight: 700;
     line-height: 1.25;
     letter-spacing: -0.015em;
@@ -130,25 +131,25 @@
 
 /* === Dark mode token overrides === */
 .dark {
-  --color-canvas: oklch(0 0 0);
+  --color-canvas: #030506;
-  --color-surface: oklch(0.07 0 0);
+  --color-surface: #101517;
-  --color-ink: oklch(1 0 0);
+  --color-ink: #f4f7f8;
-  --color-ink-soft: oklch(0.72 0 0);
+  --color-ink-soft: #8b949a;
-  --color-border: oklch(0.17 0 0);
+  --color-border: #2c353a;
-  --color-accent: oklch(0.68 0.20 250);
+  --color-accent: #00f0ff;
 
   /* Code blocks — Dark mode */
-  --color-code-block: oklch(0.04 0 0);
+  --color-code-block: #07090a;
-  --color-code-block-hover: oklch(0.06 0 0);
+  --color-code-block-hover: #101517;
-  --color-code-gutter: oklch(0.30 0 0);
+  --color-code-gutter: #8b949a;
-  --color-code-gutter-border: oklch(0.14 0 0);
+  --color-code-gutter-border: #2c353a;
-  --color-code-title-bg: oklch(0.03 0 0);
+  --color-code-title-bg: #07090a;
-  --color-code-title-text: oklch(0.55 0 0);
+  --color-code-title-text: #8b949a;
   --color-code-line-highlight: oklch(0.12 0.02 250 / 0.3);
-  --color-code-line-highlight-border: oklch(0.68 0.20 250);
+  --color-code-line-highlight-border: #00f0ff;
   --color-code-mark-bg: oklch(0.10 0.03 250 / 0.4);
-  --color-code-copy: oklch(0.60 0 0);
+  --color-code-copy: #8b949a;
-  --color-code-copy-hover: oklch(0.85 0 0);
+  --color-code-copy-hover: #f4f7f8;
 
   --shadow-card: 0 1px 4px oklch(1 0 0 / 0.06);
   --shadow-card-hover: 0 22px 50px -34px oklch(1 0 0 / 0.22), 0 1px 4px oklch(1 0 0 / 0.08);
@@ -198,7 +199,7 @@
   display: grid;
   gap: 0.75rem;
   border: 1px dashed color-mix(in oklch, var(--color-border) 78%, var(--color-ink) 22%);
-  border-radius: 1.25rem;
+  border-radius: 0.5rem;
   background: color-mix(in oklch, var(--color-surface) 55%, transparent);
   padding: 2rem;
 }
@@ -228,7 +229,7 @@
 }
 
 .article-prose :where(p, ul, ol, blockquote, details, .callout, [data-callout]) {
-  max-width: 72ch;
+  max-width: 68ch;
 }
 
 .prose :where(a) {
@@ -236,6 +237,30 @@
   text-decoration-thickness: 1px;
 }
 
+.prose [data-footnote-ref] {
+  color: var(--color-signal-cyan);
+  font-family: var(--font-mono);
+  font-size: 0.8em;
+}
+
+.prose .footnotes {
+  margin-top: 3rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1rem;
+  color: var(--color-ink-soft);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.prose .footnotes ol {
+  margin: 0.75rem 0 0;
+  padding-left: 1.25rem;
+}
+
+.prose .footnotes li {
+  margin: 0.25rem 0;
+}
+
 .prose :where(ul, ol) {
   margin: 1.5rem 0;
   padding-left: 1.5rem;
@@ -569,7 +594,7 @@ html.dark code[data-theme*=" "] span {
   left: 0;
   height: 2px;
   width: 0%;
-  background: var(--color-ink);
+  background: var(--color-signal-cyan);
   z-index: 9999;
   will-change: width;
 }
@@ -610,7 +635,8 @@ html.dark code[data-theme*=" "] span {
   pointer-events: auto;
 }
 .scroll-to-top:hover {
-  border-color: var(--color-ink);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
 }
 
 /* === Reading progress vertical bar === */
@@ -626,7 +652,7 @@ html.dark code[data-theme*=" "] span {
 .reading-progress-fill {
   width: 100%;
   height: 0%;
-  background: var(--color-ink);
+  background: var(--color-signal-cyan);
   border-radius: 2px;
 }
 @keyframes reading-progress { from { height: 0%; } to { height: 100%; } }
@@ -677,29 +703,33 @@ body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
 
 /* Type variants */
 .callout-note {
-  @apply border-accent/30 bg-accent/[0.06];
+  border-color: color-mix(in oklch, var(--color-signal-cyan) 30%, var(--color-border));
+  background: color-mix(in oklch, var(--color-signal-cyan) 8%, var(--color-surface));
 }
 .callout-note .callout-title {
-  @apply text-accent;
+  color: var(--color-signal-cyan);
 }
 
 .callout-tip {
-  @apply border-emerald-500/30 bg-emerald-500/[0.06];
+  border-color: color-mix(in oklch, var(--color-signal-green) 30%, var(--color-border));
+  background: color-mix(in oklch, var(--color-signal-green) 8%, var(--color-surface));
 }
 .callout-tip .callout-title {
-  @apply text-emerald-600 dark:text-emerald-400;
+  color: var(--color-signal-green);
 }
 
 .callout-warning {
-  @apply border-amber-500/30 bg-amber-500/[0.06];
+  border-color: color-mix(in oklch, var(--color-signal-orange) 30%, var(--color-border));
+  background: color-mix(in oklch, var(--color-signal-orange) 8%, var(--color-surface));
 }
 .callout-warning .callout-title {
-  @apply text-amber-600 dark:text-amber-400;
+  color: var(--color-signal-orange);
 }
 
 .callout-danger {
-  @apply border-red-500/30 bg-red-500/[0.06];
+  border-color: color-mix(in oklch, var(--color-signal-red) 30%, var(--color-border));
+  background: color-mix(in oklch, var(--color-signal-red) 8%, var(--color-surface));
 }
 .callout-danger .callout-title {
-  @apply text-red-600 dark:text-red-400;
+  color: var(--color-signal-red);
 }