diff --git a/src/lib/icons.ts b/src/lib/icons.ts
index c32b7f4..ca32762 100644
--- a/src/lib/icons.ts
+++ b/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";
diff --git a/src/styles/base.css b/src/styles/base.css
index 2201ea0..e86cde0 100644
--- a/src/styles/base.css
+++ b/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;
diff --git a/src/styles/components/entity-directory.css b/src/styles/components/entity-directory.css
index 0973c55..15f175c 100644
--- a/src/styles/components/entity-directory.css
+++ b/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;
diff --git a/src/styles/components/inventory.css b/src/styles/components/inventory.css
index fb4de3d..37114d8 100644
--- a/src/styles/components/inventory.css
+++ b/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; }
diff --git a/src/styles/components/recipe-books.css b/src/styles/components/recipe-books.css
index 5c42a6b..28b0747 100644
--- a/src/styles/components/recipe-books.css
+++ b/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; }
diff --git a/src/styles/components/recipe-edit.css b/src/styles/components/recipe-edit.css
index 1eb9c3e..5ba8863 100644
--- a/src/styles/components/recipe-edit.css
+++ b/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;
}
diff --git a/src/styles/components/recipe-view.css b/src/styles/components/recipe-view.css
index aea137d..a1e9f47 100644
--- a/src/styles/components/recipe-view.css
+++ b/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;
diff --git a/src/styles/components/tabs.css b/src/styles/components/tabs.css
index 2581118..e9f55a5 100644
--- a/src/styles/components/tabs.css
+++ b/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;
diff --git a/src/styles/components/tooltips.css b/src/styles/components/tooltips.css
index 9d0a3f7..edc9de4 100644
--- a/src/styles/components/tooltips.css
+++ b/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;
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 0e26b1f..f8483cb 100644
--- a/src/styles/layout.css
+++ b/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;
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 838c62b..61c222f 100644
--- a/src/styles/responsive.css
+++ b/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;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index f064e41..8981a09 100644
--- a/src/styles/tokens.css
+++ b/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;
}