chore(theme): migrate inline var() to Tailwind utilities (close #4)

components/site/Chrome.tsx

@@ -118,7 +118,7 @@ export function Chrome() {
       data-scrolled={scrolled ? "true" : undefined}
       data-tone={onDark ? "ink" : "paper"}
       className={`chrome-nav fixed inset-x-0 top-0 z-50 py-5 ${
-        onDark ? "text-[var(--paper)]" : "text-[var(--ink)]"
+        onDark ? "text-paper" : "text-ink"
       }`}
       style={{ paddingInline: "var(--frame-gutter)" }}
     >
@@ -173,16 +173,14 @@ export function Chrome() {
         <div className="col-start-3 flex items-center gap-5 justify-self-end">
           <a
             href={links.docs}
-            className="meta flex items-center gap-2 no-underline"
-            style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
+            className="meta flex items-center gap-2 no-underline border-b border-current pb-[2px]"
           >
             <span>Docs</span>
             <span aria-hidden>→</span>
           </a>
           <Link
             href={links.blog}
-            className="meta flex items-center gap-2 no-underline"
-            style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
+            className="meta flex items-center gap-2 no-underline border-b border-current pb-[2px]"
           >
             <span>Blog</span>
             <span aria-hidden>→</span>

components/site/Close.tsx

@@ -44,7 +44,7 @@ export function Close() {
             }}
             className="max-w-[64ch] leading-[1.7]"
           >
-            <span style={{ color: "var(--whisper)" }}>deCDN</span>{" "}is a peer-to-peer delivery layer for large files — software releases, datasets, media libraries, ai models, anything meant to be pulled a million times and that shouldn&apos;t depend on one bucket. the code is open. the network is open. the price is posted.
+            <span className="text-whisper">deCDN</span>{" "}is a peer-to-peer delivery layer for large files — software releases, datasets, media libraries, ai models, anything meant to be pulled a million times and that shouldn&apos;t depend on one bucket. the code is open. the network is open. the price is posted.
           </p>
 
           <div

components/site/Comparison.tsx

@@ -32,8 +32,8 @@ export function Comparison() {
         >
           the pattern repeats whenever something big ships: mirrors fork, cdns
           rate-limit, small teams burn tens of thousands hosting bytes they
-          don&apos;t own. <span style={{ color: "var(--whisper)" }}>deCDN</span>{" "}
-          inverts every axis — supply forms around demand, not allocated to it.
+          don&apos;t own. <span className="text-whisper">deCDN</span> inverts
+          every axis — supply forms around demand, not allocated to it.
         </p>
       </div>
 
@@ -77,8 +77,7 @@ export function Comparison() {
                 </span>
                 <span
                   aria-hidden
-                  className="absolute inset-x-0 top-1/2 h-[2px] -translate-y-1/2 @xl:h-[4px]"
-                  style={{ background: "var(--paper)" }}
+                  className="absolute inset-x-0 top-1/2 h-[2px] -translate-y-1/2 bg-paper @xl:h-[4px]"
                 />
               </div>
             </div>

components/site/Hero.tsx

@@ -22,7 +22,7 @@ export function Hero() {
           <span className="rise rise-1">the delivery layer</span>
           <span className="rise rise-2 pl-[7vw]">
             anyone can serve
-            <span aria-hidden style={{ color: "var(--whisper)" }}>
+            <span aria-hidden className="text-whisper">
               .
             </span>
           </span>
@@ -40,11 +40,10 @@ export function Hero() {
               verifies every chunk with blake3, and pays per megabyte in usdc —
               whether the payload is a linux iso, a dataset, a game patch, a
               media library, or an ai model.{" "}
-              <span style={{ color: "var(--whisper)" }}>deCDN</span> is
-              demand-shaped, locality-optimised delivery for large files at
-              scale: supply forms around demand, cost collapses as regional
-              traffic concentrates. the code is open. the network is open. the
-              price is posted.
+              <span className="text-whisper">deCDN</span> is demand-shaped,
+              locality-optimised delivery for large files at scale: supply forms
+              around demand, cost collapses as regional traffic concentrates.
+              the code is open. the network is open. the price is posted.
             </p>
 
             <div className="rise rise-4 flex flex-col flex-wrap gap-x-8 gap-y-3 @md:flex-row @md:items-end">

components/ui/FaqItem.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 function highlightBrand(s: string): ReactNode[] {
   return s.split(/(decdn)/gi).map((part, i) =>
     part.toLowerCase() === "decdn" ? (
-      <span key={i} style={{ color: "var(--whisper)" }}>
+      <span key={i} className="text-whisper">
         deCDN
       </span>
     ) : (

components/ui/Frame.tsx

@@ -11,8 +11,8 @@ type FrameProps = {
 };
 
 const TONE_CLASS: Record<Tone, string> = {
-  ink: "bg-[var(--ink)] text-[var(--paper)]",
-  paper: "bg-[var(--paper)] text-[var(--ink)]",
+  ink: "bg-ink text-paper",
+  paper: "bg-paper text-ink",
 };
 
 export function Frame({ id, tone, className = "", children }: FrameProps) {