style: use Tailwind v4 CSS-variable shorthand

- Replace [var(--x)] arbitrary values with the v4 (--x)
  shorthand across all components, resolving the linter
  suggestions.
- Literal arbitrary values (hex colors, rem sizes) and the
  raw CSS variables in globals.css are unchanged.

Author: nixrajput

web/app/docs/page.tsx

@@ -18,19 +18,19 @@ export default function DocsIndex() {
     <main>
       <p className="eyebrow mb-3">documentation</p>
       <h1 className="mb-4 text-4xl">Concepts &amp; guides</h1>
-      <p className="mb-8 max-w-2xl leading-relaxed text-[var(--muted)]">
+      <p className="mb-8 max-w-2xl leading-relaxed text-(--muted)">
         Everything you need to run siphon in anger — from your first backup to continuous
         cross-engine replication. These pages render the same Markdown that ships in the repository,
         so they track the latest source.
       </p>
 
       {/* Quick start: get someone to a working install without leaving the
           Overview, then point them at the first guide. */}
-      <div className="mb-12 rounded-xl border border-[var(--line)] bg-[var(--ink-2)] p-6">
+      <div className="mb-12 rounded-xl border border-(--line) bg-(--ink-2) p-6">
         <p className="eyebrow mb-3">quick start</p>
-        <p className="mb-4 max-w-xl text-sm leading-relaxed text-[var(--muted)]">
+        <p className="mb-4 max-w-xl text-sm leading-relaxed text-(--muted)">
           Install the binary, then head to{" "}
-          <Link href="/docs/getting-started" className="text-[var(--flow)]">
+          <Link href="/docs/getting-started" className="text-(--flow)">
             Getting started
           </Link>{" "}
           for your first backup and sync.
@@ -53,31 +53,31 @@ export default function DocsIndex() {
                 <Link
                   key={d.slug}
                   href={`/docs/${d.slug}`}
-                  className="group block rounded-xl border border-[var(--line)] bg-[var(--ink-2)]/40 p-5 no-underline transition-colors hover:border-[var(--flow)] hover:bg-[var(--ink-2)] hover:no-underline"
+                  className="group block rounded-xl border border-(--line) bg-(--ink-2)/40 p-5 no-underline transition-colors hover:border-(--flow) hover:bg-(--ink-2) hover:no-underline"
                 >
-                  <span className="flex items-center gap-2 text-lg font-semibold text-[var(--paper)]">
+                  <span className="flex items-center gap-2 text-lg font-semibold text-(--paper)">
                     {d.title}
-                    <span className="text-[var(--flow)] opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100">
+                    <span className="text-(--flow) opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100">
                       →
                     </span>
                   </span>
-                  <p className="mt-1.5 text-sm leading-relaxed text-[var(--muted)]">{d.blurb}</p>
+                  <p className="mt-1.5 text-sm leading-relaxed text-(--muted)">{d.blurb}</p>
                 </Link>
               ))}
             </div>
           </section>
         );
       })}
 
-      <div className="mt-12 flex flex-col gap-3 border-t border-[var(--line)] pt-8 text-sm text-[var(--muted)] sm:flex-row sm:items-center sm:justify-between">
+      <div className="mt-12 flex flex-col gap-3 border-t border-(--line) pt-8 text-sm text-(--muted) sm:flex-row sm:items-center sm:justify-between">
         <span>
           Found a gap or a bug?{" "}
-          <ExtLink href={`${REPO_URL}/issues`} className="text-[var(--flow)]">
+          <ExtLink href={`${REPO_URL}/issues`} className="text-(--flow)">
             Open an issue
           </ExtLink>
           .
         </span>
-        <ExtLink href={REPO_URL} className="text-[var(--flow)]">
+        <ExtLink href={REPO_URL} className="text-(--flow)">
           Browse the source ↗
         </ExtLink>
       </div>

web/app/page.tsx

@@ -85,7 +85,7 @@ export default function Home() {
             >
               Sync any database,
               <br />
-              <span className="bg-gradient-to-r from-[var(--flow)] to-[var(--flow-2)] bg-clip-text text-transparent">
+              <span className="bg-gradient-to-r from-(--flow) to-(--flow-2) bg-clip-text text-transparent">
                 anywhere.
               </span>
             </h1>
@@ -94,8 +94,8 @@ export default function Home() {
               style={{ "--rise-delay": "160ms" } as React.CSSProperties}
             >
               One binary that turns the painful sprawl of{" "}
-              <code className="mono text-sm text-[var(--flow)]">pg_dump → pg_restore</code> shell
-              scripts into a guided, observable workflow — across PostgreSQL, MySQL, and MariaDB.
+              <code className="mono text-sm text-(--flow)">pg_dump → pg_restore</code> shell scripts
+              into a guided, observable workflow — across PostgreSQL, MySQL, and MariaDB.
             </p>
             <div className="rise mt-8" style={{ "--rise-delay": "240ms" } as React.CSSProperties}>
               <HeroInstall />
@@ -106,13 +106,13 @@ export default function Home() {
             >
               <Link
                 href="/docs"
-                className="rounded-lg bg-[var(--flow)] px-5 py-3 font-medium text-[var(--ink)] no-underline transition-opacity hover:no-underline hover:opacity-90"
+                className="rounded-lg bg-(--flow) px-5 py-3 font-medium text-(--ink) no-underline transition-opacity hover:no-underline hover:opacity-90"
               >
                 Read the docs
               </Link>
               <ExtLink
                 href={REPO_URL}
-                className="rounded-lg border border-[var(--line)] px-5 py-3 font-medium text-[var(--paper)] no-underline transition-colors hover:border-[var(--flow)] hover:no-underline"
+                className="rounded-lg border border-(--line) px-5 py-3 font-medium text-(--paper) no-underline transition-colors hover:border-(--flow) hover:no-underline"
               >
                 View source ↗
               </ExtLink>
@@ -128,15 +128,15 @@ export default function Home() {
       <section className="mx-auto max-w-6xl px-6 py-12">
         <p className="eyebrow mb-3">how it flows</p>
         <h2 className="mb-10 max-w-2xl text-3xl">Three verbs, one conduit</h2>
-        <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] md:grid-cols-3">
+        <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) md:grid-cols-3">
           {FLOW.map((s, i) => (
-            <Reveal key={s.n} delay={i * 90} className="bg-[var(--ink)]">
+            <Reveal key={s.n} delay={i * 90} className="bg-(--ink)">
               <article className="flex h-full flex-col p-6">
-                <span className="mono text-3xl font-bold text-[var(--flow)]">{s.n}</span>
+                <span className="mono text-3xl font-bold text-(--flow)">{s.n}</span>
                 <h3 className="mt-4 text-xl">{s.title}</h3>
-                <p className="mt-2 flex-1 text-sm leading-relaxed text-[var(--muted)]">{s.body}</p>
-                <code className="mt-4 block rounded-md border border-[var(--line)] bg-[#0a111e] px-3 py-2 font-mono text-xs text-[var(--paper)]">
-                  <span className="text-[var(--amber)]">$ </span>
+                <p className="mt-2 flex-1 text-sm leading-relaxed text-(--muted)">{s.body}</p>
+                <code className="mt-4 block rounded-md border border-(--line) bg-[#0a111e] px-3 py-2 font-mono text-xs text-(--paper)">
+                  <span className="text-(--amber)">$ </span>
                   {s.cmd}
                 </code>
               </article>
@@ -151,13 +151,13 @@ export default function Home() {
         <p className="eyebrow mb-10">what it does</p>
         <div className="flex gap-8">
           <div className="flowline hidden shrink-0 sm:block" aria-hidden />
-          <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] sm:grid-cols-2">
+          <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) sm:grid-cols-2">
             {FEATURES.map((f, i) => (
-              <Reveal key={f.label} delay={(i % 2) * 90} className="bg-[var(--ink)]">
+              <Reveal key={f.label} delay={(i % 2) * 90} className="bg-(--ink)">
                 <article className="p-6">
                   <p className="eyebrow mb-3">{f.label}</p>
                   <h3 className="mb-2 text-xl">{f.title}</h3>
-                  <p className="text-sm leading-relaxed text-[var(--muted)]">{f.body}</p>
+                  <p className="text-sm leading-relaxed text-(--muted)">{f.body}</p>
                 </article>
               </Reveal>
             ))}
@@ -167,10 +167,10 @@ export default function Home() {
 
       {/* Engines strip: the three databases siphon speaks, stated once. */}
       <section className="mx-auto max-w-6xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-[var(--line)] bg-[var(--ink-2)] p-8 sm:flex-row sm:items-center">
+        <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-(--line) bg-(--ink-2) p-8 sm:flex-row sm:items-center">
           <div>
             <p className="eyebrow mb-2">speaks natively</p>
-            <p className="max-w-md text-sm leading-relaxed text-[var(--muted)]">
+            <p className="max-w-md text-sm leading-relaxed text-(--muted)">
               First-class drivers for each engine — same commands, engine-aware quoting, types, and
               change capture under the hood.
             </p>
@@ -179,7 +179,7 @@ export default function Home() {
             {ENGINES.map((e) => (
               <span
                 key={e}
-                className="rounded-full border border-[var(--line)] bg-[var(--ink)] px-4 py-2 font-mono text-sm text-[var(--flow)]"
+                className="rounded-full border border-(--line) bg-(--ink) px-4 py-2 font-mono text-sm text-(--flow)"
               >
                 {e}
               </span>
@@ -194,29 +194,29 @@ export default function Home() {
         <h2 className="mb-8 text-3xl">Up and running in one line</h2>
         <div className="space-y-6">
           <div>
-            <p className="mb-2 font-mono text-xs tracking-widest text-[var(--muted)] uppercase">
+            <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
               Linux · macOS
             </p>
             <InstallCommand command={INSTALL_CMD} />
           </div>
           <div className="grid gap-6 sm:grid-cols-2">
             <div>
-              <p className="mb-2 font-mono text-xs tracking-widest text-[var(--muted)] uppercase">
+              <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Homebrew
               </p>
               <InstallCommand command="brew install nixrajput/siphon/siphon" />
             </div>
             <div>
-              <p className="mb-2 font-mono text-xs tracking-widest text-[var(--muted)] uppercase">
+              <p className="mb-2 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Scoop (Windows)
               </p>
               <InstallCommand command="scoop install siphon" />
             </div>
           </div>
-          <p className="text-sm text-[var(--muted)]">
-            Prefer source? <code className="mono text-[var(--flow)]">go install</code> the module,
-            or grab a prebuilt binary from <ExtLink href={`${REPO_URL}/releases`}>Releases</ExtLink>
-            . Every archive has a SHA-256 checksum, and the checksum file is cosign-signed.
+          <p className="text-sm text-(--muted)">
+            Prefer source? <code className="mono text-(--flow)">go install</code> the module, or
+            grab a prebuilt binary from <ExtLink href={`${REPO_URL}/releases`}>Releases</ExtLink>.
+            Every archive has a SHA-256 checksum, and the checksum file is cosign-signed.
           </p>
         </div>
       </section>

web/components/DeveloperSection.tsx

@@ -31,19 +31,19 @@ export function DeveloperSection() {
             Made by{" "}
             <ExtLink
               href={DEVELOPER.portfolio}
-              className="bg-gradient-to-r from-[var(--flow)] to-[var(--flow-2)] bg-clip-text text-transparent hover:no-underline"
+              className="bg-gradient-to-r from-(--flow) to-(--flow-2) bg-clip-text text-transparent hover:no-underline"
             >
               {DEVELOPER.name}
             </ExtLink>
           </h2>
-          <p className="mt-4 max-w-md leading-relaxed text-[var(--muted)]">
+          <p className="mt-4 max-w-md leading-relaxed text-(--muted)">
             Open-source engineer working across databases, CLIs, and developer tooling. siphon is
             one of several projects — the rest live on GitHub.
           </p>
           <div className="mt-6">
             <ExtLink
               href={DEVELOPER.github}
-              className="inline-flex rounded-lg border border-[var(--line)] px-4 py-2 text-sm text-[var(--paper)] no-underline transition-colors hover:border-[var(--flow)] hover:no-underline"
+              className="inline-flex rounded-lg border border-(--line) px-4 py-2 text-sm text-(--paper) no-underline transition-colors hover:border-(--flow) hover:no-underline"
             >
               View @{DEVELOPER.handle} on GitHub ↗
             </ExtLink>
@@ -56,7 +56,7 @@ export function DeveloperSection() {
               {STAT_LABELS.map((label) => (
                 <div key={label}>
                   <Skeleton className="h-7 w-14" />
-                  <div className="mt-1 text-xs tracking-widest text-[var(--muted)] uppercase">
+                  <div className="mt-1 text-xs tracking-widest text-(--muted) uppercase">
                     {label}
                   </div>
                 </div>
@@ -67,10 +67,10 @@ export function DeveloperSection() {
               <div className="mt-8 flex gap-8">
                 {tiles.map((t) => (
                   <div key={t.label}>
-                    <div className="font-mono text-2xl font-bold text-[var(--paper)] tabular-nums">
+                    <div className="font-mono text-2xl font-bold text-(--paper) tabular-nums">
                       {t.value.toLocaleString()}
                     </div>
-                    <div className="mt-1 text-xs tracking-widest text-[var(--muted)] uppercase">
+                    <div className="mt-1 text-xs tracking-widest text-(--muted) uppercase">
                       {t.label}
                     </div>
                   </div>
@@ -85,12 +85,12 @@ export function DeveloperSection() {
             alone. */}
         {loading ? (
           <div>
-            <p className="mb-3 font-mono text-xs tracking-widest text-[var(--muted)] uppercase">
+            <p className="mb-3 font-mono text-xs tracking-widest text-(--muted) uppercase">
               Top repositories
             </p>
-            <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] sm:grid-cols-2">
+            <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) sm:grid-cols-2">
               {[0, 1, 2, 3].map((i) => (
-                <div key={i} className="bg-[var(--ink)] p-4">
+                <div key={i} className="bg-(--ink) p-4">
                   <div className="flex items-center justify-between gap-2">
                     <Skeleton className="h-4 w-32" />
                     <Skeleton className="h-3 w-8" />
@@ -104,26 +104,26 @@ export function DeveloperSection() {
         ) : (
           topRepos.length > 0 && (
             <div>
-              <p className="mb-3 font-mono text-xs tracking-widest text-[var(--muted)] uppercase">
+              <p className="mb-3 font-mono text-xs tracking-widest text-(--muted) uppercase">
                 Top repositories
               </p>
-              <div className="grid gap-px overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--line)] sm:grid-cols-2">
+              <div className="grid gap-px overflow-hidden rounded-xl border border-(--line) bg-(--line) sm:grid-cols-2">
                 {topRepos.map((r) => (
                   <ExtLink
                     key={r.name}
                     href={r.url}
-                    className="block bg-[var(--ink)] p-4 no-underline transition-colors hover:bg-[var(--ink-2)] hover:no-underline"
+                    className="block bg-(--ink) p-4 no-underline transition-colors hover:bg-(--ink-2) hover:no-underline"
                   >
                     <div className="flex items-center justify-between gap-2">
-                      <span className="truncate font-mono text-sm font-semibold text-[var(--paper)]">
+                      <span className="truncate font-mono text-sm font-semibold text-(--paper)">
                         {GH_OWNER}/{r.name}
                       </span>
-                      <span className="shrink-0 font-mono text-xs text-[var(--amber)]">
+                      <span className="shrink-0 font-mono text-xs text-(--amber)">
                         ★ {r.stars.toLocaleString()}
                       </span>
                     </div>
                     {r.description && (
-                      <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-[var(--muted)]">
+                      <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-(--muted)">
                         {r.description}
                       </p>
                     )}

web/components/DocsNavLink.tsx

@@ -23,10 +23,10 @@ export function DocsNavLink({
     <Link
       href={href}
       aria-current={active ? "page" : undefined}
-      className={`block rounded px-2 py-1 text-sm no-underline transition-colors hover:bg-[var(--ink-2)] hover:text-[var(--paper)] hover:no-underline ${
+      className={`block rounded px-2 py-1 text-sm no-underline transition-colors hover:bg-(--ink-2) hover:text-(--paper) hover:no-underline ${
         active
-          ? "border-l-2 border-[var(--flow)] bg-[var(--ink-2)] pl-2.5 font-medium text-[var(--paper)]"
-          : "text-[var(--muted)]"
+          ? "border-l-2 border-(--flow) bg-(--ink-2) pl-2.5 font-medium text-(--paper)"
+          : "text-(--muted)"
       }`}
     >
       {children}

web/components/HeroInstall.tsx

@@ -15,15 +15,15 @@ export function HeroInstall() {
 
   return (
     <div>
-      <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 font-mono text-xs text-[var(--muted)]">
+      <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 font-mono text-xs text-(--muted)">
         <ExtLink
           href={`${REPO_URL}/releases`}
-          className="inline-flex items-center gap-2 no-underline hover:text-[var(--paper)]"
+          className="inline-flex items-center gap-2 no-underline hover:text-(--paper)"
         >
-          <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-[var(--flow)]" aria-hidden />
+          <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-(--flow)" aria-hidden />
           {/* Show the real tag + "latest release" once one exists; until then show
               neutral "unreleased" rather than claiming a version that isn't out. */}
-          <span className="text-[var(--flow)]">{version ?? "unreleased"}</span>
+          <span className="text-(--flow)">{version ?? "unreleased"}</span>
           {version && <span>latest release</span>}
         </ExtLink>
         {/* Star count is genuinely unknown until the fetch lands: shimmer while
@@ -33,7 +33,7 @@ export function HeroInstall() {
         ) : (
           stars !== null &&
           stars > 0 && (
-            <ExtLink href={REPO_URL} className="no-underline hover:text-[var(--paper)]">
+            <ExtLink href={REPO_URL} className="no-underline hover:text-(--paper)">
               ★ {stars.toLocaleString()} on GitHub
             </ExtLink>
           )