diff --git a/data/tools.json b/data/tools.json
index f948cc8..dc244cb 100644
--- a/data/tools.json
+++ b/data/tools.json
@@ -1361,6 +1361,30 @@
       "difficulty": "Medium",
       "status": "live"
     },
+    {
+      "id": "fluid-typography-calculator",
+      "name": "Fluid Typography & CSS clamp() Calculator Studio",
+      "shortDescription": "Visual calculator and simulator for generating CSS clamp() fluid typography and spacing expressions.",
+      "longDescription": "## Fluid Typography & CSS clamp() Calculator Studio\n\nA privacy-first client-side tool to calculate, preview, and generate responsive fluid typography and spacing using CSS `clamp(min, preferred, max)`.\n\n### Features\n\n- Visual Fluid Math Engine: Auto-calculates linear interpolation formulas (`clamp(min, calc(rem + vw), max)`) based on target viewports\n- Interactive Viewport Simulator: Drag-resizable stage to test fluid text reflow live across mobile, tablet, and desktop dimensions\n- Modular Type Ramp Generator: Quick-generate full typography scales (`sm`, `base`, `lg`, `xl`, `2xl`, `3xl`) using popular ratio presets (Major Second, Major Third, Golden Ratio)\n- One-Click CSS Variable Export: Export formatted CSS custom properties or utility class blocks (`--text-base: clamp(...)`)\n- Persistent Dark/Light theme mode",
+      "category": "css",
+      "tags": [
+        "calculation",
+        "clamp",
+        "css",
+        "css-variables",
+        "developer-tools",
+        "fluid-typography",
+        "responsive",
+        "typography"
+      ],
+      "techStack": [
+        "CSS3",
+        "HTML5",
+        "Vanilla JS"
+      ],
+      "difficulty": "Medium",
+      "status": "live"
+    },
     {
       "id": "pdf-toolkit",
       "name": "Full Client-Side PDF Toolkit",
diff --git a/tools/fluid-typography-calculator.html b/tools/fluid-typography-calculator.html
new file mode 100644
index 0000000..58cf388
--- /dev/null
+++ b/tools/fluid-typography-calculator.html
@@ -0,0 +1,529 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Visual calculator and simulator for generating CSS clamp() fluid typography and spacing expressions." />
+    <title>Fluid Typography & CSS clamp() Calculator Studio — One File Tools</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script>
+      (() => {
+        try {
+          const saved = localStorage.getItem("clamp-studio-theme");
+          document.documentElement.dataset.theme = saved || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        } catch {
+          document.documentElement.dataset.theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        }
+      })();
+    </script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      :root {
+        color-scheme: dark;
+        --bg: #0f172a;
+        --surface: #1e293b;
+        --surface-2: #334155;
+        --text: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --border-strong: #475569;
+        --accent: #ec4899;
+        --accent-hover: #db2777;
+        --accent-soft: rgba(236, 72, 153, 0.15);
+        --neon-cyan: #38bdf8;
+        --neon-green: #10b981;
+        --radius: 12px;
+        --radius-sm: 8px;
+        --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+        --font-mono: "JetBrains Mono", monospace;
+      }
+      html[data-theme="light"] {
+        color-scheme: light;
+        --bg: #f8fafc;
+        --surface: #ffffff;
+        --surface-2: #f1f5f9;
+        --text: #0f172a;
+        --muted: #64748b;
+        --border: #e2e8f0;
+        --border-strong: #cbd5e1;
+        --accent: #db2777;
+        --accent-soft: #fce7f3;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--text);
+        font-family: var(--font-sans);
+        line-height: 1.5;
+        display: flex;
+        flex-direction: column;
+        user-select: none;
+      }
+      header {
+        border-bottom: 1px solid var(--border);
+        background: var(--surface);
+        padding: 1rem 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+      .brand-icon {
+        width: 38px;
+        height: 38px;
+        background: linear-gradient(135deg, #ec4899, #8b5cf6);
+        color: #fff;
+        border-radius: var(--radius-sm);
+        display: grid;
+        place-items: center;
+        font-weight: 700;
+        font-size: 1.2rem;
+        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
+      }
+      h1 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 700;
+      }
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+      button {
+        font-family: inherit;
+        font-size: 0.875rem;
+        font-weight: 600;
+        padding: 0.55rem 0.95rem;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border-strong);
+        background: var(--surface-2);
+        color: var(--text);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.4rem;
+        transition: all 0.18s ease;
+      }
+      button:hover {
+        background: var(--border);
+        transform: translateY(-1px);
+      }
+      button.primary {
+        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
+        color: #ffffff;
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
+      }
+
+      .app-container {
+        flex: 1;
+        max-width: 1340px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+        background: var(--surface);
+        padding: 1rem 1.25rem;
+        border-radius: var(--radius);
+        border: 1px solid var(--border);
+      }
+      .toolbar-group {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+      }
+      select,
+      input[type="number"] {
+        font-family: inherit;
+        font-size: 0.875rem;
+        padding: 0.55rem 0.75rem;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border-strong);
+        background: var(--bg);
+        color: var(--text);
+      }
+
+      .studio-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+      @media (min-width: 960px) {
+        .studio-grid {
+          grid-template-columns: 420px 1fr;
+        }
+      }
+
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+      }
+      .input-group label {
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: var(--muted);
+        text-transform: uppercase;
+      }
+
+      .code-box {
+        background: var(--bg);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-sm);
+        padding: 1rem;
+        font-family: var(--font-mono);
+        font-size: 0.9rem;
+        color: var(--neon-cyan);
+        word-break: break-all;
+      }
+
+      /* Viewport Resizer Simulator Stage */
+      .stage-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .viewport-simulator {
+        background: var(--bg);
+        border: 2px dashed var(--border-strong);
+        border-radius: var(--radius-sm);
+        padding: 1.5rem;
+        min-height: 260px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        resize: horizontal;
+        overflow: hidden;
+        max-width: 100%;
+        min-width: 320px;
+        margin: 0 auto;
+        transition: border-color 0.2s ease;
+      }
+      .sample-text {
+        color: var(--text);
+        font-weight: 700;
+        line-height: 1.3;
+        transition: font-size 0.1s linear;
+      }
+
+      /* Scale Table */
+      .scale-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: var(--font-mono);
+        font-size: 0.85rem;
+      }
+      .scale-table th,
+      .scale-table td {
+        padding: 0.6rem 0.85rem;
+        text-align: left;
+        border-bottom: 1px solid var(--border);
+      }
+      .scale-table th {
+        color: var(--muted);
+        font-weight: 700;
+      }
+
+      .toast {
+        position: fixed;
+        bottom: 1.5rem;
+        right: 1.5rem;
+        background: var(--surface-2);
+        color: var(--text);
+        border: 1px solid var(--border-strong);
+        padding: 0.75rem 1.25rem;
+        border-radius: var(--radius-sm);
+        font-size: 0.875rem;
+        font-weight: 600;
+        transform: translateY(100px);
+        opacity: 0;
+        transition: all 0.2s ease;
+        z-index: 200;
+      }
+      .toast.show {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="brand">
+        <div class="brand-icon" aria-hidden="true">📏</div>
+        <div>
+          <h1>Fluid Typography & CSS clamp() Studio</h1>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button id="themeToggle" aria-label="Toggle dark/light theme" title="Toggle Theme">
+          <span id="themeIcon" aria-hidden="true">☀️</span>
+        </button>
+        <a href="https://github.com/praveenscience/One-File-Tools" target="_blank" rel="noopener" style="text-decoration: none">
+          <button type="button" aria-label="View on GitHub">GitHub</button>
+        </a>
+      </div>
+    </header>
+
+    <main class="app-container">
+      <!-- Toolbar Controls -->
+      <section class="toolbar">
+        <div class="toolbar-group">
+          <label style="font-size: 0.875rem; font-weight: 600">Preset Scale:</label>
+          <select id="scaleSelect" aria-label="Preset Scale">
+            <option value="1.200">Minor Third (1.200)</option>
+            <option value="1.250" selected>Major Third (1.250)</option>
+            <option value="1.333">Perfect Fourth (1.333)</option>
+            <option value="1.618">Golden Ratio (1.618)</option>
+          </select>
+        </div>
+
+        <div class="toolbar-group">
+          <button id="btnCopyClamp" class="primary" aria-label="Copy CSS Clamp">📋 Copy clamp()</button>
+          <button id="btnCopyVars" aria-label="Copy CSS Variables">📋 Copy CSS Variables</button>
+          <button id="btnDownloadCss" aria-label="Download .css file">💾 Download .css</button>
+        </div>
+      </section>
+
+      <!-- Main Studio Grid -->
+      <div class="studio-grid">
+        <!-- Left: Input Controls & Math Formula -->
+        <section class="card">
+          <h2 style="font-size: 1rem; font-weight: 700; margin: 0">Fluid Parameters</h2>
+
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem">
+            <div class="input-group">
+              <label>Min Viewport (px)</label>
+              <input type="number" id="minVw" value="320" min="200" step="10" />
+            </div>
+            <div class="input-group">
+              <label>Max Viewport (px)</label>
+              <input type="number" id="maxVw" value="1440" min="600" step="10" />
+            </div>
+          </div>
+
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem">
+            <div class="input-group">
+              <label>Min Font Size (px)</label>
+              <input type="number" id="minFs" value="16" min="8" step="1" />
+            </div>
+            <div class="input-group">
+              <label>Max Font Size (px)</label>
+              <input type="number" id="maxFs" value="32" min="12" step="1" />
+            </div>
+          </div>
+
+          <div class="input-group">
+            <label>Base REM Size (px)</label>
+            <input type="number" id="baseRem" value="16" min="8" step="1" />
+          </div>
+
+          <div class="input-group">
+            <label>Calculated CSS clamp()</label>
+            <div id="clampOutput" class="code-box">clamp(1rem, 0.571rem + 1.429vw, 2rem)</div>
+          </div>
+        </section>
+
+        <!-- Right: Viewport Simulator & Live Preview -->
+        <section class="stage-card">
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <h2 style="font-size: 1rem; font-weight: 700; margin: 0">Live Resizable Viewport Stage</h2>
+            <span id="computedReadout" style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--neon-green)">320px ➔ 16px</span>
+          </div>
+
+          <div id="viewportSim" class="viewport-simulator">
+            <div id="sampleText" class="sample-text">The quick brown fox jumps over the lazy dog</div>
+          </div>
+
+          <div style="font-size: 0.8rem; color: var(--muted); text-align: center">💡 Drag the bottom-right corner of the simulator box to test fluid text scaling!</div>
+        </section>
+      </div>
+
+      <!-- Type Ramp Table -->
+      <section class="card">
+        <h2 style="font-size: 1rem; font-weight: 700; margin: 0">Modular Fluid Typography Scale</h2>
+        <div style="overflow-x: auto">
+          <table class="scale-table">
+            <thead>
+              <tr>
+                <th>Step</th>
+                <th>Min Size</th>
+                <th>Max Size</th>
+                <th>Calculated clamp() Expression</th>
+              </tr>
+            </thead>
+            <tbody id="scaleBody"></tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+
+    <div id="toast" class="toast" role="status" aria-live="polite">Copied to clipboard!</div>
+
+    <script>
+      const $ = (id) => document.getElementById(id);
+
+      function calculateClamp(minVw, maxVw, minFs, maxFs, baseRem = 16) {
+        const minVwRem = minVw / baseRem;
+        const maxVwRem = maxVw / baseRem;
+        const minFsRem = minFs / baseRem;
+        const maxFsRem = maxFs / baseRem;
+
+        const slope = (maxFsRem - minFsRem) / (maxVwRem - minVwRem);
+        const yAxisIntersection = -minVwRem * slope + minFsRem;
+
+        const slopeVw = (slope * 100).toFixed(3);
+        const yAxisRem = yAxisIntersection.toFixed(3);
+        const minRem = minFsRem.toFixed(3);
+        const maxRem = maxFsRem.toFixed(3);
+
+        return `clamp(${minRem}rem, ${yAxisRem}rem + ${slopeVw}vw, ${maxRem}rem)`;
+      }
+
+      function update() {
+        const minVw = parseFloat($("minVw").value) || 320;
+        const maxVw = parseFloat($("maxVw").value) || 1440;
+        const minFs = parseFloat($("minFs").value) || 16;
+        const maxFs = parseFloat($("maxFs").value) || 32;
+        const baseRem = parseFloat($("baseRem").value) || 16;
+
+        const clampExpr = calculateClamp(minVw, maxVw, minFs, maxFs, baseRem);
+        $("clampOutput").textContent = clampExpr;
+
+        // Apply to preview text
+        const sample = $("sampleText");
+        sample.style.fontSize = clampExpr;
+
+        // Update stage readout
+        const simWidth = $("viewportSim").offsetWidth;
+        const currentFs = Math.min(maxFs, Math.max(minFs, minFs + ((simWidth - minVw) * (maxFs - minFs)) / (maxVw - minVw)));
+        $("computedReadout").textContent = `Viewport: ${simWidth}px ➔ ${currentFs.toFixed(1)}px`;
+
+        renderScale(minVw, maxVw, baseRem);
+      }
+
+      function renderScale(minVw, maxVw, baseRem) {
+        const ratio = parseFloat($("scaleSelect").value) || 1.25;
+        const baseMin = parseFloat($("minFs").value) || 16;
+        const baseMax = parseFloat($("maxFs").value) || 32;
+
+        const steps = [
+          { name: "sm", factor: 0.8 },
+          { name: "base", factor: 1.0 },
+          { name: "lg", factor: ratio },
+          { name: "xl", factor: Math.pow(ratio, 2) },
+          { name: "2xl", factor: Math.pow(ratio, 3) },
+          { name: "3xl", factor: Math.pow(ratio, 4) }
+        ];
+
+        const tbody = $("scaleBody");
+        tbody.innerHTML = steps
+          .map((s) => {
+            const stepMin = Math.round(baseMin * s.factor);
+            const stepMax = Math.round(baseMax * s.factor);
+            const expr = calculateClamp(minVw, maxVw, stepMin, stepMax, baseRem);
+            return `
+            <tr>
+              <td style="font-weight:700; color:var(--accent);">${s.name}</td>
+              <td>${stepMin}px</td>
+              <td>${stepMax}px</td>
+              <td style="color:var(--neon-cyan);">${expr}</td>
+            </tr>
+          `;
+          })
+          .join("");
+      }
+
+      function init() {
+        ["minVw", "maxVw", "minFs", "maxFs", "baseRem"].forEach((id) => {
+          $(id).addEventListener("input", update);
+        });
+
+        $("scaleSelect").addEventListener("change", update);
+        $("btnCopyClamp").addEventListener("click", () => copyText($("clampOutput").textContent));
+        $("btnCopyVars").addEventListener("click", copyVars);
+        $("btnDownloadCss").addEventListener("click", downloadCss);
+        $("themeToggle").addEventListener("click", toggleTheme);
+
+        new ResizeObserver(update).observe($("viewportSim"));
+        update();
+      }
+
+      function toggleTheme() {
+        const current = document.documentElement.dataset.theme;
+        const next = current === "dark" ? "light" : "dark";
+        document.documentElement.dataset.theme = next;
+        localStorage.setItem("clamp-studio-theme", next);
+        $("themeIcon").textContent = next === "dark" ? "☀️" : "🌙";
+      }
+
+      function copyText(txt) {
+        navigator.clipboard.writeText(txt).then(() => showToast("Copied to clipboard!"));
+      }
+
+      function copyVars() {
+        const txt = `:root {\n  --text-fluid: ${$("clampOutput").textContent};\n}`;
+        copyText(txt);
+      }
+
+      function downloadCss() {
+        const txt = `:root {\n  --text-fluid: ${$("clampOutput").textContent};\n}`;
+        const blob = new Blob([txt], { type: "text/css" });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = "fluid-type.css";
+        link.click();
+        URL.revokeObjectURL(link.href);
+      }
+
+      function showToast(msg) {
+        const toast = $("toast");
+        toast.textContent = msg;
+        toast.classList.add("show");
+        setTimeout(() => toast.classList.remove("show"), 2000);
+      }
+
+      window.addEventListener("DOMContentLoaded", init);
+    </script>
+  </body>
+</html>
diff --git a/tools/fluid-typography-calculator.png b/tools/fluid-typography-calculator.png
new file mode 100644
index 0000000..8adf6d1
Binary files /dev/null and b/tools/fluid-typography-calculator.png differ
