Add: Fluid Typography & CSS clamp() Calculator Studio

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",