refactor(tokens): sanitize and remove all third-party branding references across design tokens, styles, components, and docs

docs/site-spec/meez-home-measurements.md

@@ -1,207 +0,0 @@
-# meez home page measurements
-
-Live measurements of the meez recipe home page
-(`https://app.getmeez.com/home?type=recipe`) used as the styling target for
-the Formulation app home page. Measured 2026-08-14 with an authenticated
-relay-browser tab at a 1440×900 viewport, via `getComputedStyle` and
-`getBoundingClientRect`. Re-measure before trusting these values on a new
-design pass.
-
-## Global
-
-| Property | Value |
-|---|---|
-| body background | `#f3f3f3` |
-| font family | `CircularCustCapNum, sans-serif` (proprietary; Formulation uses the Inter fallback stack) |
-| base font | 16px / weight 300 / line-height 20px |
-| text color | `#050841` |
-
-## Header (sticky top bar)
-
-- Height 80px, background `#fbfbfb`, no border, no shadow, z-index 1100.
-- Inner toolbar: padding `0 24px`, min-height 48px.
-
-### Search box
-
-- Container: 504 × 40px, background `#fff`, border 1px solid `#f3f3f3`,
-  border-radius 4px, padding `0 12px`.
-- Icon: 18px, `#8283a0`.
-- Input: 16px / weight 400, line-height 23px, padding `8px 0 6px`,
-  color `rgba(0,0,0,.87)`; placeholder `#a5a9c1`.
-
-### New button
-
-- Height 32px, border-radius 100px, background `#3d5df6`, white text,
-  16px / weight 500, padding `0 12px`.
-- "add" icon 18px, 8px gap to label.
-
-### New dropdown
-
-- Paper: 375px wide, border-radius 4px, no border, MUI elevation-2 shadow:
-  `0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)`.
-- List padding `22px 0`; items min-height 43.4px, padding `8px 25px`.
-- Item icon: 24px, `#a5a9c1`. Label: 16px / weight 500, `#050841`.
-- Hover background `#f1f5fe`.
-
-## Workspace layout
-
-- Content column 1120px wide, centered; page wrapper padding `0 32px 32px`.
-- Tabs row starts ≈26px below the header; table header ≈46px below the tabs row.
-
-### Tab chips (workspace pills)
-
-- Chip: 40px tall, border-radius 99px, padding `8px 16px 8px 12px`,
-  gap 8px, 16px / weight 400, color `rgba(0,0,0,.87)`.
-- Inactive: background `#fff`, border 1px solid `#ececec`.
-- Active: background `#DBE4FF`, no border.
-- No hover change (hover state identical to resting state).
-- Icon: 20px circle, white SVG with 1.5px inner padding. Per type:
-  - recipe `#3C4679`
-  - ingredient `#3F908A`
-  - book `#F3A642`
-  - purchase `#3F908A`
-- Label: 16px / weight 500, `#050841`, 8px right margin.
-- Count: 13px / weight 500, `#a5a9c1`.
-
-### Filter chip
-
-- Transparent background, border-radius 20px, padding 10px.
-- Funnel SVG 15×18 (viewBox `0 0 18 21`), `#050841`.
-- Text 15px / weight 400, `#050841`. Border stays transparent on hover.
-
-## Directory table
-
-- Header row: 56.66px, background `#fbfbfb`, border-bottom 1px solid
-  `#f3f3f3`, grid gap 8px, no padding; checkbox cell 36px with 8px left padding.
-- Column titles: 14px / weight 400, `#a5a9c1`, line-height 21px.
-- Sort icon: 18px, `#a5a9c1`.
-- Data row: 56.66px, background `#fff`, border-bottom 1px solid `#f3f3f3`,
-  gap 8px, no padding. **No hover background.**
-- Selected row background `#f1f5fe`.
-- meez columns: 36 (checkbox) | 112 (type) | 560 (name) | 112 (owner) |
-  224 (last viewed) | 36 (actions). Formulation clones only checkbox, type,
-  name, and actions — Owner/Last Viewed are explicitly out of scope.
-- Name text: 15px / weight 500, `#050841`, line-height 22.5px. The wrapping
-  link is `#3d5df6` but the name paragraph overrides it.
-- Row type icon: 24px circle, white 20px SVG, same per-type colors as tabs.
-- Checkbox: 20×20; unchecked outline `#ececec`, checked fill `#3d5df6`
-  with white check.
-- Row action button (more_vert): 24×24, `#a5a9c1`, border-radius 50%,
-  hover background `rgba(0,0,0,.04)`.
-
-### Row action menu
-
-- Paper: 275px, border-radius 4px, elevation-2 shadow, list padding `8px 0`.
-- Items: min-height 47.4px, padding `10px 30px`, label 16px / weight 500
-  `#050841`, icon 24px `#a5a9c1`.
-- Hover `#f1f5fe` (verified with real mouse input). Delete item `#f63d48`.
-
-### Delete dialog
-
-- Paper: 700px, border-radius 10px, padding `30px 38px`, MUI elevation-24
-  shadow:
-  `0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)`.
-- Backdrop `rgba(0,0,0,.5)`.
-- Title: 28px / weight 700, `#202962`, line-height 39px.
-- Subtitle: 15px / weight 400, `#050841`.
-- Cancel: transparent, 15px / weight 500, `#050841`, 52px gap to Delete.
-- Delete: `#f63d48` pill, 16px / weight 500, padding `16px 24px`,
-  min-width 250px, height 48px, border-radius 100px.
-
-## Dropdown panels (filter / item-type menus)
-
-- 300px wide, border-radius 4px, no border, elevation-2 shadow,
-  padding `14px 0`.
-- Labels: 14px; hover `#f1f5fe`. Apply button `#3d5df6`.
-
-## Measurement cautions
-
-- MUI hover states (menu items, chips) only appear with real mouse input
-  (CDP mouse events), not synthetic `mouseover` dispatch.
-- The relay tab cannot screenshot while not visible; use computed styles
-  and rects.
-- Re-measure on any new pass: these are point-in-time values from one
-  authenticated account's render.
-
-## Recipe read view (`/recipes/{id}/steps`)
-
-Measured on the same account (recipe "Marinated Pork Belly"), same viewport
-rules apply. Formulation's counterpart: `/app/recipes/{id}/` (read mode).
-
-### Header (48px, background `#fbfbfb`)
-
-- Breadcrumb links "Home / Recipes": 12px / weight 400, `#202962`,
-  line-height 22.5px; "/" separators `#95969c`, margin 0 4px.
-- Edit button: white pill, 1px `#3d5df6` border, radius 100px, height 32px,
-  padding 0 12px, text 15px / weight 500 `#3d5df6`, edit icon 16px with 8px
-  right margin.
-- Share button (not cloned): `#050841` pill, white 16px / weight 500.
-
-### Layout
-
-- Body `#f3f3f3`; content wrapper starts 16px below the header.
-- Two 50/50 columns, both background `#fbfbfb`; right column has a 1px
-  `#f3f3f3` left border. Left padding `0 36px 35px`, right `0 32px 32px`.
-- meez keeps both columns at 1027px viewport width (stacking breakpoint is
-  lower than Formulation's old 1280px).
-
-### Left column (formula)
-
-- Title: 28px / weight 900, `#050841`, line-height 42px; owner line
-  12px / weight 500 directly below.
-- Batch/yield row: labels 14px / weight 400 `#050841` with 15px right
-  padding; "1x" batch value 14px / weight 500 with `#a5a9c1` underline;
-  yield value 15px / weight 500.
-- Ingredient table: no header row, no row borders. Component heading rows
-  18px / weight 500, line-height 27px, bottom border `#fdfdfd`. Ingredient
-  rows 40.66px tall, cell padding 8px 0 (name cell +10px left). Quantity
-  number 15px / weight 300, unit 14px. Name link 15px / weight 400,
-  `rgba(0,0,0,.87)`.
-
-### Right column (tabs + method)
-
-- Tab bar: 48px, at the top of the column. Tabs: icon 24px in a 45px box
-  (8px padding, 5px right margin), label 13px / weight 400 `#050841`,
-  padding 0 10px 0 0, 1px `#f3f3f3` right border between tabs.
-  Active: background `#f1f5fe` + 1px `#3d5df6` bottom border.
-- Panel heading row: h2 22px / weight 700, line-height 33px; step count
-  16px / weight 700 `#a5a9c1` with 8px left margin; 34px bottom margin.
-- Step section headings: 18px / weight 500, line-height 27px.
-- Steps: number 16px / weight 700, text 16px / weight 300, `#050841`;
-  separators 1px `#f3f3f3` with 16px vertical margins.
-- Additional details: heading 18px / weight 500; label 14px / weight 500,
-  value 15px / weight 500, `#050841`.
-
-### Tab icons (Material paths, white-on-inherit)
-
-- Prep Method: list icon, viewBox 24 (`M4 10.5c-.83 0-1.5.67-1.5 1.5s.67
-  1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5m0-6c-.83 0-1.5.67-1.5
-  1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5m0 12c-.83 0-1.5.68-1.5
-  1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5M7 19h14v-2H7zm0-6h14
-  v-2H7zm0-8v2h14V5z`).
-- Cost: attach_money icon, viewBox 24.
-- UoM Equivalency: custom balance icon, viewBox 24.
-- Nutrition: custom heart icon, viewBox 20×18.
-### Cost panel (`/recipes/{id}/cost`, measured in the second pass)
-
-- Panel padding `35px 32px 0` (same `#fbfbfb` column).
-- h2 22px / weight 700, line-height 33px; description 14px / weight 400
-  `#95969c`; ≈20px gap before the list.
-- Column header row: padding `0 0 4px 14px`, bottom border `#f3f3f3`,
-  labels 12px / weight 500 `#a5a9c1`; "Expand all | Collapse all" links
-  12px / weight 500 `#3d5df6`.
-- Rows (MUI accordions): min-height 48px, summary padding `12px 32px`,
-  name 15px / weight 400 `#050841`, cost value 15px / weight 400.
-  Detail labels ("Purchase Item Name", etc.) 14px / weight 400 `#a5a9c1`.
-
-### UoM Equivalency panel (`/recipes/{id}/equivalency`)
-
-- h2 "U of M Equivalency" 22px / weight 700, line-height 33px.
-- Description 14px muted `#95969c`.
-- Equivalency matrix: three value columns (Weight / Volume / Each) with
-  "=" separators; columns ≈124px wide, 79.5px tall.
-
-### Nutrition tab
-
-Gated ("Upgrade" teaser) on the measured account — no read-mode nutrition
-panel exists in meez to match.

scripts/extract-meez-tokens.js

@@ -1,83 +0,0 @@
-/**
- * Meez Design Token & Style Extractor
- * 
- * Paste this snippet into the DevTools Console while viewing Meez
- * (e.g. https://app.getmeez.com/home?type=recipe or a recipe detail page).
- * It will collect computed styles, layout metrics, and SVG icons and copy
- * a formatted JSON report to your clipboard.
- */
-(() => {
-  const getStyle = (el, prop) => el ? window.getComputedStyle(el).getPropertyValue(prop) : null;
-
-  const extractComponent = (selector, name) => {
-    const el = document.querySelector(selector);
-    if (!el) return null;
-    const style = window.getComputedStyle(el);
-    const rect = el.getBoundingClientRect();
-    return {
-      name,
-      selector,
-      dimensions: { width: rect.width, height: rect.height },
-      typography: {
-        fontFamily: style.fontFamily,
-        fontSize: style.fontSize,
-        fontWeight: style.fontWeight,
-        lineHeight: style.lineHeight,
-        letterSpacing: style.letterSpacing,
-        color: style.color,
-      },
-      surface: {
-        backgroundColor: style.backgroundColor,
-        borderRadius: style.borderRadius,
-        border: `${style.borderWidth} ${style.borderStyle} ${style.borderColor}`,
-        boxShadow: style.boxShadow,
-      },
-      spacing: {
-        padding: style.padding,
-        margin: style.margin,
-        gap: style.gap,
-      }
-    };
-  };
-
-  // Collect key UI elements on current page
-  const report = {
-    url: window.location.href,
-    timestamp: new Date().toISOString(),
-    global: {
-      bodyBackground: getStyle(document.body, 'background-color'),
-      fontFamily: getStyle(document.body, 'font-family'),
-      fontSize: getStyle(document.body, 'font-size'),
-      color: getStyle(document.body, 'color'),
-    },
-    components: {
-      header: extractComponent('header, [role="banner"], .MuiAppBar-root', 'Header / Top Bar'),
-      searchBox: extractComponent('input[type="search"], input[placeholder*="Search"]', 'Search Input'),
-      newButton: extractComponent('button:has(svg), a:has(svg)', 'New Button'),
-      tableHeader: extractComponent('[role="rowgroup"] [role="row"]:first-child, thead tr', 'Table Header'),
-      tableRow: extractComponent('[role="rowgroup"] [role="row"]:not(:first-child), tbody tr:first-child', 'Table Data Row'),
-      tabPillActive: extractComponent('.MuiChip-root, [role="tab"][aria-selected="true"]', 'Active Tab / Pill'),
-    },
-    svgIcons: Array.from(document.querySelectorAll('svg')).slice(0, 30).map((svg, idx) => ({
-      index: idx,
-      viewBox: svg.getAttribute('viewBox'),
-      width: svg.getAttribute('width') || svg.clientWidth,
-      height: svg.getAttribute('height') || svg.clientHeight,
-      fill: getStyle(svg, 'fill') || getStyle(svg, 'color'),
-      paths: Array.from(svg.querySelectorAll('path')).map(p => p.getAttribute('d')),
-      ariaLabel: svg.getAttribute('aria-label') || svg.closest('button, a')?.getAttribute('aria-label') || ''
-    }))
-  };
-
-  console.log('=== MEEZ EXTRACTED TOKENS ===', report);
-  const jsonStr = JSON.stringify(report, null, 2);
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(jsonStr).then(() => {
-      console.log('✅ Tokens copied to clipboard!');
-    }).catch(() => {
-      console.log('Copy to clipboard failed. Access report via window.__meezReport');
-    });
-  }
-  window.__meezReport = report;
-  return report;
-})();

src/application/pages/app/archive.astro

@@ -523,7 +523,7 @@ function formatDeleteDate(dateStr: string | null) {
     border: 1px solid #dfe3ec;
     border-radius: 999px;
     color: #3d5df6;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;

src/application/pages/app/index.astro

@@ -61,14 +61,14 @@ const type = ["recipe","ingredient","book","purchase"].includes(requested ?? "")
   ? requested
   : (query ? undefined : "recipe");
 
-// Recipe attention filters (Meez spec)
+// Recipe attention filters
 const emptyRecipe=Astro.url.searchParams.get("empty_recipe")==="1";
 const missingYield=Astro.url.searchParams.get("missing_yield")==="1";
 const placeholderSteps=Astro.url.searchParams.get("placeholder_steps")==="1";
 const attentionRecipe=Astro.url.searchParams.get("attention")==="1";
 const recipeFilterActive=emptyRecipe||missingYield||placeholderSteps||attentionRecipe;
 
-// Ingredient attention filters (Meez spec)
+// Ingredient attention filters
 const unused=Astro.url.searchParams.get("unused")==="1";
 const missingCost=Astro.url.searchParams.get("missing_cost")==="1";
 const noPurchase=Astro.url.searchParams.get("no_purchase")==="1" || Astro.url.searchParams.get("no_usda")==="1";

src/application/pages/app/inventory/[id].astro

@@ -439,7 +439,7 @@ const isCompleted = count.status === "completed";
     background: white;
     border-radius: 999px;
     cursor: pointer;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 14px;
     font-weight: 500;
     color: #050841;
@@ -457,7 +457,7 @@ const isCompleted = count.status === "completed";
     border: none;
     border-radius: 999px;
     cursor: pointer;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 14px;
     font-weight: 500;
     transition: background 0.12s ease;
@@ -630,7 +630,7 @@ const isCompleted = count.status === "completed";
     background: white;
     border: 1px solid #050841;
     border-radius: 999px;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-weight: 500;
     font-size: 14px;
     color: #050841;

src/application/pages/app/inventory/index.astro

@@ -262,7 +262,7 @@ database.close();
     color: white;
     border: none;
     border-radius: 999px;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-weight: 500;
     font-size: 14px;
     cursor: pointer;
@@ -474,7 +474,7 @@ database.close();
     background: transparent;
     border-radius: 999px;
     cursor: pointer;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 14px;
     font-weight: 500;
     color: #8b93a7;
@@ -491,7 +491,7 @@ database.close();
     border: none;
     border-radius: 999px;
     cursor: pointer;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 14px;
     font-weight: 500;
     transition: background 0.12s ease;

src/application/pages/app/recipes/[id].astro

@@ -313,7 +313,7 @@ const recipeTabIcon = (name: string) => getTabIconHtml(name as TabIconKey);
                     <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/>
                   </svg>
                 </button>
-                <span class="uom-tooltip-popper meez-tooltip-card" role="tooltip">
+                <span class="uom-tooltip-popper fmt-tooltip-card" role="tooltip">
                   For example, if your recipe yields 1 quart, weighs 850 grams, and each portion is 85 grams, toggle off the standard conversion and enter '850 grams = 1 quart = 10 portions'.
                 </span>
               </span>

src/components/RecipeCalculator.tsx

@@ -180,7 +180,7 @@ export default function RecipeCalculator({ components, units, basisUnitId, yield
           <span class="recipe-scale-control batch-size-control">
             <select
               aria-label="Batch size multiplier"
-              class="meez-scale-select"
+              class="fmt-scale-select"
               data-testid="ScaleSelectorBase_scale_select"
               style={{ width: `${currentScaleLabel.length + 2.4}ch` }}
               value={!showCustomInput && matchedScaleOption ? String(matchedScaleOption.value) : "custom"}
@@ -257,7 +257,7 @@ export default function RecipeCalculator({ components, units, basisUnitId, yield
               </svg>
             </button>
             {showScaleTooltip && (
-              <div class="helper-tooltip-popper meez-tooltip-card" role="tooltip">
+              <div class="helper-tooltip-popper fmt-tooltip-card" role="tooltip">
                 <div class="tooltip-section">
                   <b>Ways to scale your recipe:</b>
                   <ul>
@@ -345,7 +345,7 @@ export default function RecipeCalculator({ components, units, basisUnitId, yield
                                 </svg>
                               </button>
                               {activeAttentionId === item.id && (
-                                <div class="ingredient-attention-popper meez-tooltip-card" role="tooltip">
+                                <div class="ingredient-attention-popper fmt-tooltip-card" role="tooltip">
                                   <p>{item.attentionMessage ?? "No conversion equivalency available for this unit."}</p>
                                 </div>
                               )}
@@ -390,7 +390,7 @@ export function DerivedValues({ nutrition, cost, servings, factor }: { nutrition
                   <path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"/>
                 </svg>
               </button>
-              <span class="cost-tooltip-popper meez-tooltip-card" role="tooltip">
+              <span class="cost-tooltip-popper fmt-tooltip-card" role="tooltip">
                 <b>There is not enough information to calculate cost. Please verify the below:</b>
                 <ul>
                   <li>This recipe and all its sub-recipes must include Total Yield</li>
@@ -479,7 +479,7 @@ function CostLedgerLine({ line, factor, currency, editable, expanded }: { line:C
                   <path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"/>
                 </svg>
               </button>
-              <span class="cost-line-tooltip meez-tooltip-card" role="tooltip">
+              <span class="cost-line-tooltip fmt-tooltip-card" role="tooltip">
                 {line.purchase ? "Cost information is incomplete" : "This ingredient is not yet set with a purchase cost and unit"}
               </span>
             </span>
@@ -541,7 +541,7 @@ export function LiveCostValues({ cost, yieldQuantity, yieldUnit="g", editable=fa
                   <path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"/>
                 </svg>
               </button>
-              <span class="cost-tooltip-popper meez-tooltip-card" role="tooltip">
+              <span class="cost-tooltip-popper fmt-tooltip-card" role="tooltip">
                 <b>There is not enough information to calculate cost. Please verify the below:</b>
                 <ul>
                   <li>This recipe and all its sub-recipes must include Total Yield</li>

src/components/WorkspaceFilterBar.tsx

@@ -371,7 +371,7 @@ export default function WorkspaceFilterBar({
         )}
       </div>
 
-      {/* 2. Mobile Filter & Sort Modal (Meez Parity) */}
+      {/* 2. Mobile Filter & Sort Modal */}
       {menuOpen && typeof document !== "undefined" && createPortal(
         <div class="mobile-filter-backdrop" role="dialog" aria-modal="true" aria-label="Filter and Sort">
           <div class="mobile-filter-sheet">

src/lib/icons.ts

@@ -1,6 +1,6 @@
 /**
  * Formulation - Centralized Icon Library
- * Exact SVG icons and path definitions matching Meez design system
+ * SVG icons and path definitions for workspace design system
  */
 
 export type TabIconKey = "method" | "costing" | "equivalencies" | "nutrition" | "formula" | "overview";

src/styles/base.css

@@ -327,7 +327,7 @@ th { font-size:.7rem; letter-spacing:.06em; }
   border:0;
   border-bottom:1px solid transparent;
   border-radius:0;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:28px;
   font-weight:900;
   line-height:42px;
@@ -349,7 +349,7 @@ th { font-size:.7rem; letter-spacing:.06em; }
   background:#3d5df6;
   border:0;
   border-radius:100px;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:15px;
   font-weight:500;
   cursor:pointer;

src/styles/components/entity-directory.css

@@ -9,7 +9,7 @@
   --orange:#647df8;
   color:#050841;
   background:#ffffff;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:16px;
   font-weight:300;
   line-height:20px;
@@ -48,8 +48,8 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .search-type-filter summary { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:20px; font-size:16px; font-weight:400; list-style:none; cursor:pointer; }
 .application-body .search-type-filter summary::-webkit-details-marker { display:none; }
 .application-body .filter-icon { flex: none; width: 16px; height: 19px; color: #3d5df6; fill: #3d5df6; }
-@keyframes meez-menu-in { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
-.application-body .workspace-new-menu[open] > nav,.application-body .filter-menu[open] > form,.application-body .search-type-filter[open] > form,.application-body .entity-row-actions[open] > div { animation:meez-menu-in .2s cubic-bezier(0.4,0,0.2,1); }
+@keyframes fmt-menu-in { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
+.application-body .workspace-new-menu[open] > nav,.application-body .filter-menu[open] > form,.application-body .search-type-filter[open] > form,.application-body .entity-row-actions[open] > div { animation:fmt-menu-in .2s cubic-bezier(0.4,0,0.2,1); }
 .application-body .search-type-filter form,.application-body .filter-menu form,.application-body .workspace-new-menu nav { border:1px solid #eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); }
 .application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { padding:10px 17px; color:#fff; background:#3d5df6; border-radius:20px; font-size:14px; font-weight:600; }
 .application-body .workspace-new-menu,.application-body .detail-new-menu { position:relative; flex:none; }
@@ -139,7 +139,7 @@ input[type="search"]::-webkit-search-results-decoration,
   background: #3d5df6;
   border: 0;
   border-radius: 999px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -186,7 +186,7 @@ input[type="search"]::-webkit-search-results-decoration,
   background: transparent;
   border: 0;
   border-radius: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   text-align: left;
@@ -279,7 +279,7 @@ input[type="search"]::-webkit-search-results-decoration,
 
 .application-body .workspace-utility-link {
   color: #8b93a7;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
@@ -333,7 +333,7 @@ input[type="search"]::-webkit-search-results-decoration,
   background: transparent;
   border: 1px solid transparent;
   border-radius: 999px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 16px;
   font-weight: 300;
   cursor: pointer;
@@ -376,7 +376,7 @@ input[type="search"]::-webkit-search-results-decoration,
   border-radius: 6px;
   box-shadow: 0 10px 30px rgba(5, 8, 65, 0.12);
   padding: 12px 0 8px;
-  animation: meez-menu-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fmt-menu-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .application-body .workspace-filter-menu-popover.align-right {
@@ -417,7 +417,7 @@ input[type="search"]::-webkit-search-results-decoration,
   border: 0;
   background: transparent;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   cursor: pointer;
@@ -481,7 +481,7 @@ input[type="search"]::-webkit-search-results-decoration,
   border: 0;
   background: transparent;
   color: #3d5df6;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -519,7 +519,7 @@ input[type="search"]::-webkit-search-results-decoration,
 
 .application-body .filter-connector-and {
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 400;
   padding: 0 2px;
@@ -556,7 +556,7 @@ input[type="search"]::-webkit-search-results-decoration,
   border: 0;
   background: transparent;
   color: #3d5df6;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -646,7 +646,7 @@ input[type="search"]::-webkit-search-results-decoration,
   border-radius: 6px;
   box-shadow: 0 10px 30px rgba(5, 8, 65, 0.12);
   padding: 12px;
-  animation: meez-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fmt-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .application-body .filter-chip-popover.align-right {
@@ -683,7 +683,7 @@ input[type="search"]::-webkit-search-results-decoration,
   min-width: 0;
   border: 0;
   background: transparent;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   color: #050841;
   outline: none;
@@ -749,7 +749,7 @@ input[type="search"]::-webkit-search-results-decoration,
   list-style: none;
 }
 
-/* Mobile Filter & Sort Modal (Meez Parity) */
+/* Mobile Filter & Sort Modal (Formulation Parity) */
 .mobile-filter-backdrop {
   display: none;
 }
@@ -768,10 +768,10 @@ input[type="search"]::-webkit-search-results-decoration,
     justify-content: flex-end;
     background: rgba(5, 8, 65, 0.45);
     backdrop-filter: blur(2px);
-    animation: meez-fade-in 0.2s ease;
+    animation: fmt-fade-in 0.2s ease;
   }
 
-  @keyframes meez-fade-in {
+  @keyframes fmt-fade-in {
     from { opacity: 0; }
     to { opacity: 1; }
   }
@@ -784,13 +784,13 @@ input[type="search"]::-webkit-search-results-decoration,
     background: #ffffff !important;
     border-radius: 16px 16px 0 0;
     box-shadow: 0 -8px 32px rgba(5, 8, 65, 0.18);
-    animation: meez-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: fmt-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     overflow: hidden;
     position: relative;
     z-index: 1000000;
   }
 
-  @keyframes meez-slide-up {
+  @keyframes fmt-slide-up {
     from { transform: translateY(100%); }
     to { transform: translateY(0); }
   }
@@ -881,7 +881,7 @@ input[type="search"]::-webkit-search-results-decoration,
     border-bottom: 1px solid #edf0f5;
     background: #ffffff;
     color: #050841;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 15px;
     font-weight: 400;
     cursor: pointer;
@@ -931,7 +931,7 @@ input[type="search"]::-webkit-search-results-decoration,
     border: 0;
     background: transparent;
     color: #3d5df6;
-    font-family: var(--meez-font-sans);
+    font-family: var(--fmt-font-sans);
     font-size: 14px;
     font-weight: 500;
     text-align: left;

src/styles/components/inventory.css

@@ -15,7 +15,7 @@
 .application-body .purchasing-review-actions { display: flex; align-items: center; gap: 12px; }
 .application-body .purchasing-search-box { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; background: #ffffff; border: 1px solid #dfe3ec; border-radius: 4px; }
 .application-body .purchasing-search-box .search-icon { color: #8283a0; flex: none; }
-.application-body .purchasing-search-box input { border: 0; background: transparent; outline: none; font-family: var(--meez-font-sans); font-size: 14px; color: #050841; min-width: 180px; }
+.application-body .purchasing-search-box input { border: 0; background: transparent; outline: none; font-family: var(--fmt-font-sans); font-size: 14px; color: #050841; min-width: 180px; }
 .application-body .search-clear-btn { background: transparent; border: 0; color: #a5a9c1; font-size: 18px; cursor: pointer; padding: 0 2px; }
 .application-body .purchasing-filter-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
 .application-body .purchasing-filter-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
@@ -24,7 +24,7 @@
 .application-body .purchasing-filter-toggle input:checked + .toggle-track { background: #3d5df6; }
 .application-body .purchasing-filter-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }
 .application-body .toggle-label { color: #050841; font-size: 13px; font-weight: 500; }
-.application-body .purchasing-export-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; background: #3d5df6; color: #fff; border: 0; border-radius: 100px; font-family: var(--meez-font-sans); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 6px rgba(61, 93, 246, 0.28); transition: background 0.15s ease; }
+.application-body .purchasing-export-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; background: #3d5df6; color: #fff; border: 0; border-radius: 100px; font-family: var(--fmt-font-sans); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 6px rgba(61, 93, 246, 0.28); transition: background 0.15s ease; }
 .application-body .purchasing-export-btn:hover { background: #2b4be0; }
 .application-body .purchasing-products-grid { display: flex; flex-direction: column; gap: 20px; }
 .application-body .purchasing-card { padding: 24px; background: #fff; border: 1px solid #eef0f5; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: border-color 0.15s ease; }
@@ -58,7 +58,7 @@
 .application-body .candidate-other-option { margin: 4px 0; padding: 6px 0; }
 .application-body .other-select-label { display: flex; align-items: center; gap: 12px; }
 .application-body .other-select-text { color: #687086; font-size: 13px; font-weight: 500; white-space: nowrap; }
-.application-body .purchasing-select { flex: 1; min-height: 38px; padding: 6px 12px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--meez-font-sans); font-size: 14px; outline: none; cursor: pointer; }
+.application-body .purchasing-select { flex: 1; min-height: 38px; padding: 6px 12px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--fmt-font-sans); font-size: 14px; outline: none; cursor: pointer; }
 .application-body .purchasing-select:focus { border-color: #3d5df6; }
 .application-body .purchasing-notice-card { display: flex; align-items: flex-start; gap: 14px; padding: 24px; background: #fff; border: 1px solid #eef0f5; border-radius: 6px; color: #050841; }
 .application-body .purchasing-notice-card svg { color: #3d5df6; flex: none; margin-top: 2px; }

src/styles/components/recipe-books.css

@@ -44,7 +44,7 @@
 .application-body .book-field-group { display: flex; flex-direction: column; gap: 16px; }
 .application-body .book-field-group label { display: flex; flex-direction: column; gap: 6px; }
 .application-body .field-label { color: #050841; font-size: 13px; font-weight: 600; }
-.application-body .book-input, .application-body .book-textarea { width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--meez-font-sans); font-size: 15px; font-weight: 400; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
+.application-body .book-input, .application-body .book-textarea { width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--fmt-font-sans); font-size: 15px; font-weight: 400; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
 .application-body .book-input:focus, .application-body .book-textarea:focus { border-color: #3d5df6; box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.15); }
 .application-body .book-recipe-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
 .application-body .book-checklist-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #edf0f5; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
@@ -54,7 +54,7 @@
 .application-body .book-checklist-label { display: flex; align-items: center; gap: 8px; flex: 1; }
 .application-body .book-checklist-label strong { color: #050841; font-size: 14px; font-weight: 500; }
 .application-body .book-edit-actions { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
-.application-body .book-save-btn { min-height: 40px; padding: 0 24px; background: #3d5df6; color: #fff; border: 0; border-radius: 100px; font-family: var(--meez-font-sans); font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 6px rgba(61, 93, 246, 0.28); transition: background 0.15s ease; }
+.application-body .book-save-btn { min-height: 40px; padding: 0 24px; background: #3d5df6; color: #fff; border: 0; border-radius: 100px; font-family: var(--fmt-font-sans); font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 6px rgba(61, 93, 246, 0.28); transition: background 0.15s ease; }
 .application-body .book-save-btn:hover { background: #2b4be0; }
 .application-body .book-cancel-link { color: #687086; font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 12px; transition: color 0.12s ease; }
 .application-body .book-cancel-link:hover { color: #050841; }

src/styles/components/recipe-edit.css

@@ -47,7 +47,7 @@
   transform: scale(1.08);
 }
 
-/* Row inputs: 15px font, borderless with Meez blue underline on hover & focus */
+/* Row inputs: 15px font, borderless with primary blue underline on hover & focus */
 .application-body .unified-recipe-editor .editor-items .quantity-column input,
 .application-body .unified-recipe-editor .editor-items .unit-column select,
 .application-body .unified-recipe-editor .editor-items .entity-column input,
@@ -62,7 +62,7 @@
   border: 0;
   border-bottom: 1px solid transparent;
   border-radius: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 400;
   text-align: left;
@@ -88,7 +88,7 @@
   opacity: 0.85;
 }
 
-/* Hover: crisp Meez blue underline */
+/* Hover: crisp primary blue underline */
 .application-body .unified-recipe-editor .editor-items tbody tr input:hover,
 .application-body .unified-recipe-editor .editor-items tbody tr select:hover {
   background: transparent;
@@ -144,7 +144,7 @@
   border: 0;
   border-radius: 6px;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   text-align: left;
@@ -221,7 +221,7 @@
   background:#fff;
   border:1px dashed #cfd5fa;
   border-radius:6px;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:13px;
   transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
@@ -260,7 +260,7 @@
   border: 0;
   border-radius: 6px;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   text-align: left;
@@ -281,7 +281,7 @@
   padding-top: 8px;
 }
 
-/* Method editor: modern compact step cards matching Meez */
+/* Method editor: modern compact step cards formulation layout */
 .application-body .method-editor {
   min-width: 0;
   padding: 0;
@@ -295,7 +295,7 @@
 }
 .application-body .method-header-row h2 {
   margin: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 20px;
   font-weight: 500;
   color: #050841;
@@ -313,7 +313,7 @@
   background: #fff;
   border: 1px solid #3d5df6;
   border-radius: 100px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
@@ -379,7 +379,7 @@
   border-radius: 0;
   outline: 0;
   background: transparent;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   line-height: 20px;
   color: #050841;
@@ -451,10 +451,10 @@
   transform: scale(1.08);
 }
 
-/* Prep Method View Mode - Compact Meez Parity */
+/* Prep Method View Mode - Compact Step Layout */
 .application-body .recipe-view-method h2 {
   margin: 0 0 16px 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 20px !important;
   font-weight: 500 !important;
   color: #050841 !important;
@@ -485,7 +485,7 @@
   margin: 0 !important;
   padding: 0 !important;
   color: #050841 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   line-height: 1.45 !important;
 }
@@ -493,7 +493,7 @@
 .application-body .recipe-view-method .method-step-item strong {
   min-width: 20px !important;
   flex-shrink: 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   color: #050841 !important;
@@ -502,7 +502,7 @@
 
 .application-body .recipe-view-method .method-step-item span {
   flex: 1 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 400 !important;
   color: #050841 !important;
@@ -516,7 +516,7 @@
 
 .application-body .recipe-view-method .method-heading-text {
   margin: 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   color: #050841 !important;
@@ -529,7 +529,7 @@
 
 .application-body .recipe-view-method .method-note-text {
   margin: 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 13px !important;
   font-style: italic !important;
   color: #737c91 !important;
@@ -564,7 +564,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 400;
   color: #050841;
@@ -624,7 +624,7 @@
   color: #3d5df6;
   background: transparent;
   border: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -650,7 +650,7 @@
   background: #ffffff;
   border: 1px solid #050841;
   border-radius: 999px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -755,7 +755,7 @@
   border-bottom: 1px solid transparent;
   border-radius: 0;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 28px;
   font-weight: 900;
   line-height: 38px;
@@ -822,7 +822,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }

src/styles/components/recipe-view.css

@@ -1,4 +1,4 @@
-/* Search bar in detail-tools: Meez styling with search icon, clear button, hover & focus */
+/* Search bar in detail-tools: formulation styling with search icon, clear button, hover & focus */
 .application-body .detail-tools {
   display: flex;
   align-items: center;
@@ -45,7 +45,7 @@
   border: 0 !important;
   outline: 0 !important;
   box-shadow: none !important;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   color: #050841;
@@ -84,14 +84,14 @@
 .application-body .recipe-view-formula { padding:0 0 35px; border-right:0; background:transparent; }
 .application-body .recipe-view-details { padding:26px 32px 60px; border-left:1px solid #edf0f5; background:#ffffff; }
 
-/* Formula table: borderless rows, meez typography. */
+/* Formula table: borderless rows, formulation typography. */
 .application-body .recipe-view-formula .formula-component { margin:0 0 20px 0; border:0; background:transparent; font:inherit; }
 .application-body .recipe-view-formula .formula-component h3,
 .application-body .recipe-view-formula .formula-component-heading {
   margin: 18px 0 8px 0;
   padding: 0 0 6px 0;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 18px;
   font-weight: 700;
   line-height: 24px;
@@ -133,7 +133,7 @@
 .application-body .recipe-view-method .method-heading-text {
   margin: 0;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 18px;
   font-weight: 700;
   line-height: 24px;
@@ -150,15 +150,15 @@
   font-style: italic;
   line-height: 1.4;
 }
-/* Secondary panels: meez panel headings and copy. */
-/* U of M Equivalency: Meez Style */
+/* Secondary panels: formulation panel headings and copy. */
+/* U of M Equivalency: formulation Style */
 .application-body .recipe-view-equivalencies {
   padding: 8px 0 36px;
 }
 .application-body .recipe-view-equivalencies h2 {
   margin: 0 0 4px;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 22px;
   font-weight: 700;
   line-height: 1.3;
@@ -168,7 +168,7 @@
 .application-body .recipe-view-equivalencies .uom-equation-title {
   margin: 0 0 8px;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 700;
   line-height: 1.4;
@@ -181,7 +181,7 @@
   gap: 6px;
   margin: 0 0 28px;
   color: #4d5481;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
@@ -262,7 +262,7 @@
 }
 .application-body .recipe-view-equivalencies .toggle-label-group strong {
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   -webkit-font-smoothing: antialiased;
@@ -270,7 +270,7 @@
 }
 .application-body .recipe-view-equivalencies .toggle-label-group small {
   color: #95969c;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 400;
   line-height: 1.4;
@@ -296,7 +296,7 @@
 }
 .application-body .recipe-view-equivalencies .uom-group-label {
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   -webkit-font-smoothing: antialiased;
@@ -318,7 +318,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 400;
   text-align: left;
@@ -336,7 +336,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 400;
   cursor: pointer;
@@ -360,7 +360,7 @@
   margin-top: 0;
   margin-bottom: 0;
   color: #050841;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 20px;
   font-weight: 700;
   flex: 0 0 auto;
@@ -401,7 +401,7 @@
   font-size: 13px;
 }
 
-/* Cost ledger: meez accordion-list language. */
+/* Cost ledger: formulation accordion-list language. */
 .application-body .recipe-derived-panel .recipe-cost-ledger header { margin-bottom:20px; }
 .application-body .recipe-derived-panel .cost-line-detail { color:#a5a9c1; font-size:14px; font-weight:400; }
 .application-body .recipe-read-shell .recipe-derived-panel .cost-line-detail small { margin-bottom:3px; color:#a5a9c1; font-size:14px; font-weight:400; }
@@ -419,7 +419,7 @@
 .application-body .recipe-additional-view p span { color:#050841; font-size:15px; font-weight:500; }
 .application-body .recipe-additional-view ul { margin:0; color:#050841; font-size:15px; }
 
-/* Keep the read workspace two-column in the 981-1280 range (meez stays
+/* Keep the read workspace two-column in the 981-1280 range (formulation stays
    split at these widths). */
 @media (max-width:1280px) and (min-width:981px) {
   .application-body .immersive-main .recipe-view-workspace { grid-template-columns:1fr 1fr; }
@@ -429,7 +429,7 @@
   .application-body .immersive-main .recipe-read-tabs button { flex:0 0 auto; }
 }
 
-/* Recipe read view — meez steps clone (measured live 2026-08-15). */
+/* Recipe read view — formulation steps clone (measured live 2026-08-15). */
 .application-body .immersive-main:has(.recipe-read-shell) { background:#ffffff; }
 .application-body .immersive-main .recipe-read-shell {
   display:grid;
@@ -478,7 +478,7 @@
   margin:0;
   padding:0;
   color:#050841;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:28px;
   font-weight:700;
   line-height:38px;
@@ -496,7 +496,7 @@
   border:0;
   border-bottom:1px solid transparent;
   outline:0;
-  font-family:var(--meez-font-sans);
+  font-family:var(--fmt-font-sans);
   font-size:28px;
   font-weight:700;
   line-height:38px;
@@ -560,7 +560,7 @@
   background: #ffffff;
   border: 1px solid #3d5df6;
   border-radius: 999px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
@@ -587,7 +587,7 @@
   background: #3d5df6;
   border: 1px solid #3d5df6;
   border-radius: 999px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -642,7 +642,7 @@
 }
 .application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator { margin-top:0; }
 
-/* Formula meta row: Batch and Yield controls matching Meez style. */
+/* Formula meta row: Batch and Yield controls matching formulation style. */
 .application-body .recipe-view-formula .calculator-heading,
 .application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading {
   display: flex !important;
@@ -666,7 +666,7 @@
   margin: 0 12px 0 0 !important;
   padding: 2px 6px 2px 0 !important;
   color: #050841 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 400 !important;
   letter-spacing: 0 !important;
@@ -676,7 +676,7 @@
 }
 
 .application-body .recipe-view-formula .calculator-heading .shelf-life-value {
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 400 !important;
   color: #050841 !important;
@@ -687,7 +687,7 @@
 .application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .scale-label {
   display: inline-block !important;
   color: #70707b !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 400 !important;
   padding-right: 8px !important;
@@ -730,8 +730,8 @@
   padding: 0 !important;
 }
 
-.application-body .recipe-view-formula .calculator-heading .meez-scale-select {
-  font-family: var(--meez-font-sans) !important;
+.application-body .recipe-view-formula .calculator-heading .fmt-scale-select {
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: #050841 !important;
@@ -746,12 +746,12 @@
   transition: border-color 0.15s ease !important;
 }
 
-.application-body .recipe-view-formula .calculator-heading .meez-scale-select:hover {
+.application-body .recipe-view-formula .calculator-heading .fmt-scale-select:hover {
   border-bottom-color: #050841 !important;
   cursor: pointer !important;
 }
 
-.application-body .recipe-view-formula .calculator-heading .meez-scale-select:focus {
+.application-body .recipe-view-formula .calculator-heading .fmt-scale-select:focus {
   border-bottom: 1px solid #050841 !important;
   border-bottom-color: #050841 !important;
   outline: none !important;
@@ -780,7 +780,7 @@
 .application-body .recipe-view-formula .calculator-heading .custom-scale-input {
   width: auto !important;
   min-width: 16px !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: #050841 !important;
@@ -812,7 +812,7 @@
   border: 0 !important;
   border-bottom: none !important;
   outline: 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 15px !important;
   font-weight: 500 !important;
   text-align: left !important;
@@ -838,7 +838,7 @@
 }
 
 .application-body .recipe-view-formula .calculator-heading .batch-unit-suffix {
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: #050841 !important;
@@ -871,7 +871,7 @@
   border-bottom: none !important;
   border-radius: 0 !important;
   outline: 0 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 15px !important;
   font-weight: 500 !important;
   cursor: pointer !important;
@@ -888,11 +888,11 @@
 }
 
 
-/* Meez HelperTooltipBase_help_icon & Meez Tooltip Popups */
-.application-body .meez-tooltip-card {
+/* formulation HelperTooltipBase_help_icon & formulation Tooltip Popups */
+.application-body .fmt-tooltip-card {
   background: #ffffff !important;
   color: #050841 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 13px !important;
   font-weight: 400 !important;
   line-height: 1.5 !important;
@@ -908,14 +908,14 @@
   overflow-wrap: break-word !important;
 }
 
-.application-body .meez-tooltip-card * {
+.application-body .fmt-tooltip-card * {
   white-space: normal !important;
   word-break: normal !important;
   overflow-wrap: break-word !important;
   box-sizing: border-box !important;
 }
 
-@keyframes meezTooltipFadeIn {
+@keyframes fmtTooltipFadeIn {
   from {
     opacity: 0;
     transform: translateY(4px);
@@ -972,7 +972,7 @@
   word-break: normal !important;
   overflow-wrap: break-word !important;
   box-sizing: border-box !important;
-  animation: meezTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation: fmtTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .application-body .helper-tooltip-popper .tooltip-section {
@@ -1051,7 +1051,7 @@
   z-index: 1500 !important;
   padding: 10px 14px !important;
   font-size: 12px !important;
-  animation: meezTooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation: fmtTooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .application-body .ingredient-attention-popper p {
@@ -1103,7 +1103,7 @@
   line-height: 1.45 !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08) !important;
   border-radius: 4px !important;
-  animation: meezTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation: fmtTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .application-body .uom-help-wrap:hover .uom-tooltip-popper,
@@ -1163,7 +1163,7 @@
   width: max-content !important;
   max-width: min(380px, calc(100vw - 32px)) !important;
   z-index: 1500 !important;
-  animation: meezTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation: fmtTooltipFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .application-body .cost-help-wrap:hover .cost-tooltip-popper,
@@ -1216,7 +1216,7 @@
   padding: 10px 14px !important;
   font-size: 12px !important;
   line-height: 1.4 !important;
-  animation: meezTooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation: fmtTooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .application-body .cost-line-help-wrap:hover .cost-line-tooltip,
@@ -1276,7 +1276,7 @@
   align-items: center !important;
   gap: 8px !important;
   color: #050841 !important;
-  font-family: var(--meez-font-sans) !important;
+  font-family: var(--fmt-font-sans) !important;
   font-size: 13px !important;
   font-weight: 500 !important;
   cursor: pointer !important;

src/styles/components/tabs.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   Subheader Tabs Navigation (Meez Parity)
+   Subheader Tabs Navigation 
    ========================================================================== */
 
 .application-body .recipe-workspace-tabs,
@@ -42,7 +42,7 @@
   border-bottom: 2px solid transparent;
   border-right: 1px solid #f3f3f3;
   border-radius: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;

src/styles/components/tooltips.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   Ingredient Detail (View & Edit) — Meez matching styles
+   Ingredient Detail (View & Edit) — Tooltip styles
    ========================================================================== */
 
 .application-body .recipe-read-shell.ingredient-read-shell {
@@ -46,7 +46,7 @@
 }
 
 .application-body .ingredient-read-left .entity-detail-header h1 {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 28px;
   font-weight: 700;
   line-height: 38px;
@@ -63,7 +63,7 @@
   border: 0;
   border-bottom: 1px solid transparent;
   outline: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 28px;
   font-weight: 700;
   line-height: 38px;
@@ -82,7 +82,7 @@
 }
 
 .application-body .ingredient-read-left .entity-section h2 {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 22px;
   font-weight: 700;
   line-height: 33px;
@@ -91,7 +91,7 @@
 }
 
 .application-body .ingredient-read-left .panel-intro {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   line-height: 1.5;
   color: #8283a0;
@@ -99,7 +99,7 @@
 }
 
 .application-body .ingredient-read-left .field-help {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 12px;
   line-height: 1.5;
   color: #8283a0;
@@ -115,7 +115,7 @@
   background: #fff;
   border: 1px solid #050841;
   border-radius: 18px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -143,7 +143,7 @@
   background: #fff;
   border: 0;
   border-bottom: 1px solid #edf0f5;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -158,7 +158,7 @@
   background: #fff;
   border: 0;
   border-bottom: 1px solid #edf0f5;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   vertical-align: middle;
@@ -177,7 +177,7 @@
   border: 0;
   border-bottom: 1px solid transparent;
   outline: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   color: #050841;
@@ -201,7 +201,7 @@
   color: #3d5df6;
   background: transparent;
   border: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
@@ -247,7 +247,7 @@
 }
 
 .application-body .ingredient-read-left .additional-card h2 {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 18px;
   font-weight: 500;
   color: #050841;
@@ -260,7 +260,7 @@
 }
 
 .application-body .ingredient-read-left .additional-card summary {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   color: #050841;
@@ -311,7 +311,7 @@
 .application-body .ingredient-read-left .ingredient-detail-fields label {
   display: grid;
   gap: 6px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   color: #050841;
@@ -324,7 +324,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   color: #050841;
   box-sizing: border-box;
@@ -358,7 +358,7 @@
 }
 
 .application-body .ingredient-read-right .ingredient-view-details h2 {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 22px;
   font-weight: 700;
   line-height: 33px;
@@ -367,7 +367,7 @@
 }
 
 .application-body .ingredient-read-right .ingredient-view-details .panel-intro {
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   line-height: 1.5;
   color: #8283a0;
@@ -384,7 +384,7 @@
   background: #fff;
   border: 1px solid #050841;
   border-radius: 18px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -424,7 +424,7 @@
 .application-body .ingredient-read-right .purchase-item-form label {
   display: grid;
   gap: 6px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 11px;
   font-weight: 700;
   color: #8283a0;
@@ -439,7 +439,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 400;
   color: #050841;
@@ -461,7 +461,7 @@
   color: #fff;
   border: 0;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -513,7 +513,7 @@
 .application-body .ingredient-read-right .equivalency-editor .inline-form label {
   display: grid;
   gap: 6px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 11px;
   font-weight: 700;
   color: #8283a0;
@@ -528,7 +528,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   color: #050841;
   box-sizing: border-box;
@@ -561,7 +561,7 @@
   color: #fff;
   border: 0;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -579,7 +579,7 @@
   color: #8283a0;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   cursor: pointer;
 }
@@ -598,7 +598,7 @@
 .application-body .ingredient-read-right .usda-id-form label {
   display: grid;
   gap: 6px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 11px;
   font-weight: 700;
   color: #8283a0;
@@ -613,7 +613,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   color: #050841;
   box-sizing: border-box;
@@ -626,7 +626,7 @@
   color: #fff;
   border: 0;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;

src/styles/layout.css

@@ -33,7 +33,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 500;
   color: #050841;
@@ -46,7 +46,7 @@
   background: #fff;
   border: 1px solid #dfe3ec;
   border-radius: 4px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 15px;
   font-weight: 400;
   color: #050841;
@@ -106,7 +106,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 13px;
   font-weight: 500;
   color: #050841;
@@ -204,7 +204,7 @@
   background: transparent;
   border: 0;
   outline: 0;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 18px;
   font-weight: 500;
   line-height: 27px;
@@ -258,7 +258,7 @@
   height: 38px;
   padding: 0 6px 6px;
   color: #95969c;
-  font-family: var(--meez-font-sans);
+  font-family: var(--fmt-font-sans);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: normal;
@@ -300,7 +300,7 @@
   vertical-align: middle;
 }
 
-/* Recipe read view — meez skin (measured live 2026-08-14). */
+/* Recipe read view — formulation layout styles */
 .application-body .immersive-main { background:#ffffff; }
 .application-body .recipe-detail-shell.recipe-read-shell {
   display: grid;

src/styles/responsive.css

@@ -109,7 +109,7 @@
     min-width: 40px !important;
     padding: 4px 0 !important;
     font-size: 13px !important;
-    font-family: var(--meez-font-sans) !important;
+    font-family: var(--fmt-font-sans) !important;
     border: 0 !important;
     background: transparent !important;
     outline: none !important;
@@ -193,7 +193,7 @@
   .application-body .ingredient-read-left .entity-detail-header h1 {
     margin: 0 !important;
     padding: 0 !important;
-    font-family: var(--meez-font-sans) !important;
+    font-family: var(--fmt-font-sans) !important;
     font-size: 24px !important;
     line-height: 1.25 !important;
     font-weight: 700 !important;
@@ -214,7 +214,7 @@
   .application-body .recipe-title-editor,
   .application-body .editable-entity-title,
   .application-body .ingredient-title-editor {
-    font-family: var(--meez-font-sans) !important;
+    font-family: var(--fmt-font-sans) !important;
     font-size: 24px !important;
     font-weight: 700 !important;
     line-height: 1.25 !important;
@@ -233,7 +233,7 @@
     margin-inline: 16px !important;
   }
   
-  /* Segmented Mobile Tab Bar (Parity with Meez) */
+  /* Segmented Mobile Tab Bar  */
   .application-body .recipe-read-tabs,
   .application-body .entity-tabs,
   .application-body .recipe-workspace-tabs {
@@ -429,7 +429,7 @@
   }
   .application-body form.workspace-global-search input[type="search"] {
     font-size: 14px !important;
-    font-family: var(--meez-font-sans) !important;
+    font-family: var(--fmt-font-sans) !important;
   }
   .application-body .search-type-filter {
     flex: none !important;

src/styles/tokens.css

@@ -1,71 +1,70 @@
 /**
- * Meez Unified Design System Tokens
- * Measured directly from live authenticated Meez session
+ * Formulation Design System Tokens
  */
 :root {
   /* Surface Colors */
-  --meez-bg-page: #ffffff;
-  --meez-bg-card: #ffffff;
-  --meez-bg-card-alt: #fafbfd;
-  --meez-bg-card-hover: #f8faff;
-  --meez-bg-white: #ffffff;
-  --meez-bg-active-pill: #dbe4ff;
+  --fmt-bg-page: #ffffff;
+  --fmt-bg-card: #ffffff;
+  --fmt-bg-card-alt: #fafbfd;
+  --fmt-bg-card-hover: #f8faff;
+  --fmt-bg-white: #ffffff;
+  --fmt-bg-active-pill: #dbe4ff;
   
   /* Text & Ink Colors */
-  --meez-text-primary: #050841;
-  --meez-text-secondary: #202962;
-  --meez-text-muted: #a5a9c1;
-  --meez-text-subtle: #757677;
-  --meez-text-gray: #8283a0;
-  --meez-text-body: rgba(0, 0, 0, 0.87);
-  --meez-text-danger: #f63d48;
+  --fmt-text-primary: #050841;
+  --fmt-text-secondary: #202962;
+  --fmt-text-muted: #a5a9c1;
+  --fmt-text-subtle: #757677;
+  --fmt-text-gray: #8283a0;
+  --fmt-text-body: rgba(0, 0, 0, 0.87);
+  --fmt-text-danger: #f63d48;
 
   /* Brand, Type Badge & Accent Colors */
-  --meez-blue: #3d5df6;
-  --meez-blue-hover: #304fdf;
-  --meez-blue-active: #1236e1;
-  --meez-blue-tint: #f1f5fe;
-  --meez-blue-badge: #dbe4ff;
-  --meez-type-recipe: #3c4679;
-  --meez-type-ingredient: #3f908a;
-  --meez-type-book: #f3a642;
-  --meez-type-purchase: #3f908a;
-  --meez-green: #3f908a;
-  --meez-green-dark: #20ab85;
-  --meez-orange: #f3a642;
-  --meez-danger: #f63d48;
-  --meez-danger-hover: #e02834;
-  --meez-danger-bg: #fff1f2;
-  --meez-danger-tint: #fff0e8;
-  --meez-danger-dark: #9a3412;
+  --fmt-blue: #3d5df6;
+  --fmt-blue-hover: #304fdf;
+  --fmt-blue-active: #1236e1;
+  --fmt-blue-tint: #f1f5fe;
+  --fmt-blue-badge: #dbe4ff;
+  --fmt-type-recipe: #3c4679;
+  --fmt-type-ingredient: #3f908a;
+  --fmt-type-book: #f3a642;
+  --fmt-type-purchase: #3f908a;
+  --fmt-green: #3f908a;
+  --fmt-green-dark: #20ab85;
+  --fmt-orange: #f3a642;
+  --fmt-danger: #f63d48;
+  --fmt-danger-hover: #e02834;
+  --fmt-danger-bg: #fff1f2;
+  --fmt-danger-tint: #fff0e8;
+  --fmt-danger-dark: #9a3412;
 
   /* Border Colors */
-  --meez-border-subtle: #f3f3f3;
-  --meez-border-default: #ececec;
-  --meez-border-strong: #dfe3ec;
-  --meez-border-divider: #eeeef3;
+  --fmt-border-subtle: #f3f3f3;
+  --fmt-border-default: #ececec;
+  --fmt-border-strong: #dfe3ec;
+  --fmt-border-divider: #eeeef3;
 
   /* Elevation Shadows (Material UI standard elevations) */
-  --meez-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
-  --meez-shadow-elevation-2: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
-  --meez-shadow-elevation-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
-  --meez-shadow-elevation-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
-  --meez-shadow-elevation-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
+  --fmt-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --fmt-shadow-elevation-2: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
+  --fmt-shadow-elevation-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+  --fmt-shadow-elevation-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
+  --fmt-shadow-elevation-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
 
   /* Border Radii */
-  --meez-radius-xs: 2px;
-  --meez-radius-sm: 4px;
-  --meez-radius-md: 6px;
-  --meez-radius-lg: 8px;
-  --meez-radius-xl: 10px;
-  --meez-radius-pill: 100px;
-  --meez-radius-chip: 999px;
-  --meez-radius-circle: 50%;
+  --fmt-radius-xs: 2px;
+  --fmt-radius-sm: 4px;
+  --fmt-radius-md: 6px;
+  --fmt-radius-lg: 8px;
+  --fmt-radius-xl: 10px;
+  --fmt-radius-pill: 100px;
+  --fmt-radius-chip: 999px;
+  --fmt-radius-circle: 50%;
 
   /* Transitions */
-  --meez-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --meez-transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --fmt-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --fmt-transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Fonts */
-  --meez-font-sans: "CircularCustCapNum", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --fmt-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }