From 3ef5908b0916d9783f34fb8b6546929ba837b2b3 Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Thu, 26 Jun 2025 17:19:18 +0200
Subject: [PATCH] css variables

---
 iframe.html | 377 ++++++++++++++++++++++++++--------------------------
 1 file changed, 191 insertions(+), 186 deletions(-)

diff --git a/iframe.html b/iframe.html
index 2a4813a..6f9df01 100644
--- a/iframe.html
+++ b/iframe.html
@@ -14,6 +14,11 @@
             --border-color: #e8e3ed;
             --text-primary: #6f3f6d;
             --text-secondary: #8f7a8e;
+            --accent-color: #f19a5f;
+            --text-label: #635870;      /* For form labels, secondary UI text */
+            --success-color: #7fa464;   /* Green for success states */
+            --bg-tertiary: #f8f5fa;     /* Light background variant */
+            --error-color: #e87159;     /* Error states and messages */
         }
 
         body {
@@ -23,7 +28,7 @@
             overflow-x: hidden;
             font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             line-height: 1.5;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container {
@@ -46,8 +51,8 @@
         }
 
         .dog-calculator-section {
-            background: #fdfcfe;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
             border-radius: 8px 8px 0 0;
             padding: 24px;
             margin-bottom: 0;
@@ -65,7 +70,7 @@
 
         .dog-calculator-section h2 {
             margin: 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.5rem;
             font-weight: 600;
         }
@@ -80,12 +85,12 @@
         .dog-calculator-unit-label {
             font-size: 0.9rem;
             font-weight: 500;
-            color: #635870;
+            color: var(--text-label);
             transition: color 0.2s ease;
         }
 
         .dog-calculator-unit-label.active {
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-weight: 600;
         }
 
@@ -109,7 +114,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-color: #e8e3ed;
+            background-color: var(--border-color);
             transition: 0.3s;
             border-radius: 24px;
         }
@@ -143,7 +148,7 @@
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1rem;
         }
 
@@ -152,12 +157,12 @@
         .dog-calculator-form-group input[type="text"] {
             width: 100%;
             padding: 12px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 1rem;
             font-family: inherit;
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
             transition: all 0.2s ease;
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -170,8 +175,8 @@
         }
 
         .dog-calculator-form-group select option {
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .dog-calculator-form-group input[type="number"],
@@ -185,14 +190,14 @@
         .dog-calculator-form-group input[type="text"]:focus {
             outline: none;
             border-color: #f19a5f;
-            background-color: #ffffff;
+            background-color: var(--bg-secondary);
             box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
         }
 
         .dog-calculator-form-group input[readonly] {
-            background-color: #f8f5fa;
+            background-color: var(--bg-tertiary);
             cursor: not-allowed;
-            color: #635870;
+            color: var(--text-label);
         }
 
         .dog-calculator-results {
@@ -216,13 +221,13 @@
 
         .dog-calculator-result-label {
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 0.95rem;
         }
 
         .dog-calculator-result-value {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
             padding: 4px 12px;
             background: rgba(241, 154, 95, 0.15);
@@ -230,8 +235,8 @@
         }
 
         .dog-calculator-collapsible {
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
             border-top: none;
             margin-bottom: 0;
             overflow: hidden;
@@ -239,15 +244,15 @@
         }
 
         .dog-calculator-collapsible-header {
-            background: #f8f5fa;
+            background: var(--bg-tertiary);
             padding: 20px 24px;
-            border-bottom: 1px solid #e8e3ed;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .dog-calculator-collapsible-header h3 {
             margin: 0;
             font-size: 1.25rem;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-weight: 600;
         }
 
@@ -275,7 +280,7 @@
         }
 
         .dog-calculator-error {
-            color: #e87159;
+            color: var(--error-color);
             font-size: 0.875rem;
             margin-top: 6px;
             font-weight: 500;
@@ -291,16 +296,16 @@
             justify-content: center;
             gap: 16px;
             padding: 20px;
-            background: #f8f5fa;
-            border-left: 1px solid #e8e3ed;
-            border-right: 1px solid #e8e3ed;
+            background: var(--bg-tertiary);
+            border-left: 1px solid var(--border-color);
+            border-right: 1px solid var(--border-color);
             margin-top: -1px;
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
         }
 
         .dog-calculator-btn {
             padding: 8px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             font-weight: 500;
@@ -311,7 +316,7 @@
             align-items: center;
             gap: 6px;
             background: white;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-btn:hover {
@@ -325,15 +330,15 @@
         }
 
         .dog-calculator-btn-embed:hover {
-            border-color: #7fa464;
-            color: #7fa464;
+            border-color: var(--success-color);
+            color: var(--success-color);
         }
 
         .dog-calculator-footer {
             text-align: center;
             padding: 20px;
-            background: #fdfcfe;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
             border-radius: 0 0 8px 8px;
             border-top: none;
             margin-top: -1px;
@@ -449,18 +454,18 @@
             --border-color: #433c4f;
             --text-primary: #f5f3f7;
             --text-secondary: #b8b0c2;
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-section,
         .dog-calculator-container.theme-dark .dog-calculator-collapsible {
-            background: #24202d;
-            border-color: #433c4f;
+            background: var(--bg-primary);
+            border-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover {
@@ -471,51 +476,51 @@
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3,
         .dog-calculator-container.theme-dark .dog-calculator-form-group label,
         .dog-calculator-container.theme-dark .dog-calculator-result-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-label {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-label.active {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-slider {
-            background-color: #433c4f;
+            background-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"],
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] {
-            background-color: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select option {
-            background-color: #312b3b;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select:focus,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus {
-            background-color: #312b3b;
+            background-color: var(--bg-secondary);
             border-color: #f19a5f;
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] {
-            background-color: #433c4f;
-            color: #b8b0c2;
+            background-color: var(--border-color);
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-inline-unit {
-            background-color: #312b3b;
+            background-color: var(--bg-secondary);
             border-color: rgba(241, 154, 95, 0.5);
-            color: #f5f3f7;
+            color: var(--text-primary);
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         }
@@ -531,14 +536,14 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-inline-unit option {
-            background-color: #312b3b;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-btn {
-            background-color: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-btn:hover {
@@ -558,24 +563,24 @@
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-result-value {
-            color: #f5f3f7;
+            color: var(--text-primary);
             background: rgba(241, 154, 95, 0.2);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-footer {
-            background: #24202d;
-            border-color: #433c4f;
+            background: var(--bg-primary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-action-buttons {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn {
-            background: #433c4f;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background: var(--border-color);
+            border-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn:hover {
@@ -589,8 +594,8 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
-            border-color: #7fa464;
-            color: #7fa464;
+            border-color: var(--success-color);
+            color: var(--success-color);
         }
 
         /* System theme - follows user's OS preference */
@@ -601,18 +606,18 @@
                 --border-color: #433c4f;
                 --text-primary: #f5f3f7;
                 --text-secondary: #b8b0c2;
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-section,
             .dog-calculator-container.theme-system .dog-calculator-collapsible {
-                background: #24202d;
-                border-color: #433c4f;
+                background: var(--bg-primary);
+                border-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover {
@@ -623,51 +628,51 @@
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header h3,
             .dog-calculator-container.theme-system .dog-calculator-form-group label,
             .dog-calculator-container.theme-system .dog-calculator-result-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-label {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-label.active {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-slider {
-                background-color: #433c4f;
+                background-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"],
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] {
-                background-color: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
                 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select option {
-                background-color: #312b3b;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                color: var(--text-primary);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select:focus,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus {
-                background-color: #312b3b;
+                background-color: var(--bg-secondary);
                 border-color: #f19a5f;
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] {
-                background-color: #433c4f;
-                color: #b8b0c2;
+                background-color: var(--border-color);
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-inline-unit {
-                background-color: #312b3b;
+                background-color: var(--bg-secondary);
                 border-color: rgba(241, 154, 95, 0.5);
-                color: #f5f3f7;
+                color: var(--text-primary);
                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
             }
@@ -683,14 +688,14 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-inline-unit option {
-                background-color: #312b3b;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-btn {
-                background-color: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-btn:hover {
@@ -710,24 +715,24 @@
             }
             
             .dog-calculator-container.theme-system .dog-calculator-result-value {
-                color: #f5f3f7;
+                color: var(--text-primary);
                 background: rgba(241, 154, 95, 0.2);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-footer {
-                background: #24202d;
-                border-color: #433c4f;
+                background: var(--bg-primary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-action-buttons {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn {
-                background: #433c4f;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background: var(--border-color);
+                border-color: var(--border-color);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn:hover {
@@ -741,8 +746,8 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
-                border-color: #7fa464;
-                color: #7fa464;
+                border-color: var(--success-color);
+                color: var(--success-color);
             }
         }
 
@@ -766,10 +771,10 @@
 
         .dog-calculator-modal-content {
             position: relative;
-            background-color: #ffffff;
+            background-color: var(--bg-secondary);
             margin: 5% auto;
             padding: 30px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 12px;
             width: 90%;
             max-width: 500px;
@@ -798,7 +803,7 @@
             top: 20px;
             font-size: 28px;
             font-weight: 300;
-            color: #6f3f6d;
+            color: var(--text-primary);
             cursor: pointer;
             transition: color 0.2s ease;
         }
@@ -809,7 +814,7 @@
 
         .dog-calculator-modal h3 {
             margin: 0 0 24px 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.5rem;
         }
 
@@ -843,7 +848,7 @@
         .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
         .dog-calculator-share-linkedin { background: #0a66c2; }
         .dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
-        .dog-calculator-share-email { background: #6f3f6d; }
+        .dog-calculator-share-email { background: var(--text-primary); }
         .dog-calculator-share-email:hover { background: #5a3357; transform: translateY(-1px); }
         .dog-calculator-share-copy { background: #f19a5f; }
         .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
@@ -857,12 +862,12 @@
             flex: 1;
             width: 100%;
             padding: 10px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             font-family: monospace;
-            background: #f8f5fa;
-            color: #6f3f6d;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
         }
 
         /* Embed Modal */
@@ -873,7 +878,7 @@
         }
 
         .dog-calculator-embed-option {
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 8px;
             padding: 20px;
             background: #fcfafd;
@@ -881,21 +886,21 @@
 
         .dog-calculator-embed-option h4 {
             margin: 0 0 8px 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
         }
 
         .dog-calculator-embed-option p {
             margin: 0 0 16px 0;
-            color: #635870;
+            color: var(--text-label);
             font-size: 0.9rem;
         }
 
         /* Default (light theme) code containers */
         .dog-calculator-code-container {
             position: relative;
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             overflow: hidden;
         }
@@ -907,7 +912,7 @@
         }
 
         .dog-calculator-code-container code {
-            color: #312b3b;
+            color: var(--bg-secondary);
             font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
             font-size: 0.85rem;
             line-height: 1.4;
@@ -931,21 +936,21 @@
         }
 
         .dog-calculator-copy-btn:hover { background: #e87741; }
-        .dog-calculator-copy-btn.copied { background: #7fa464; }
-        .dog-calculator-copy-btn.copied:hover { background: #7fa464; }
+        .dog-calculator-copy-btn.copied { background: var(--success-color); }
+        .dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
 
         /* Dark theme modal styles */
         .dog-calculator-container.theme-dark .dog-calculator-modal-content {
-            background-color: #24202d;
-            border-color: #433c4f;
+            background-color: var(--bg-primary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal h3 {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal-close {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal-close:hover {
@@ -953,22 +958,22 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-share-url input {
-            background: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option p {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         /* Dark theme code containers - different from embed option background */
@@ -978,22 +983,22 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-code-container code {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         /* System theme modal styles */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-modal-content {
-                background-color: #24202d;
-                border-color: #433c4f;
+                background-color: var(--bg-primary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal h3 {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal-close {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal-close:hover {
@@ -1001,22 +1006,22 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-share-url input {
-                background: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option p {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             /* System theme code containers - different from embed option background */
@@ -1026,7 +1031,7 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-code-container code {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
         }
 
@@ -1038,8 +1043,8 @@
         }
 
         .dog-calculator-food-source-card {
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
             border-radius: 8px;
             padding: 20px;
             position: relative;
@@ -1059,13 +1064,13 @@
 
         .dog-calculator-food-source-title {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
             margin: 0;
         }
 
         .dog-calculator-remove-food-btn {
-            background: #e87159;
+            background: var(--error-color);
             color: white;
             border: none;
             border-radius: 50%;
@@ -1089,14 +1094,14 @@
         .dog-calculator-percentage-group {
             margin-top: 16px;
             padding-top: 16px;
-            border-top: 1px solid #e8e3ed;
+            border-top: 1px solid var(--border-color);
         }
 
         .dog-calculator-percentage-label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1rem;
         }
 
@@ -1110,7 +1115,7 @@
             flex: 1;
             height: 6px;
             border-radius: 3px;
-            background: #e8e3ed;
+            background: var(--border-color);
             outline: none;
             transition: all 0.2s ease;
             -webkit-appearance: none;
@@ -1149,12 +1154,12 @@
         .dog-calculator-percentage-input {
             width: 70px;
             padding: 8px 12px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             text-align: center;
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .dog-calculator-percentage-input:focus {
@@ -1170,10 +1175,10 @@
             gap: 8px;
             width: 100%;
             padding: 16px;
-            border: 2px dashed #e8e3ed;
+            border: 2px dashed var(--border-color);
             border-radius: 8px;
             background: transparent;
-            color: #635870;
+            color: var(--text-label);
             font-size: 1rem;
             font-weight: 500;
             cursor: pointer;
@@ -1191,14 +1196,14 @@
         .dog-calculator-add-food-btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
-            border-color: #e8e3ed;
-            color: #635870;
+            border-color: var(--border-color);
+            color: var(--text-label);
             background: transparent;
         }
 
         .dog-calculator-add-food-btn:disabled:hover {
-            border-color: #e8e3ed;
-            color: #635870;
+            border-color: var(--border-color);
+            color: var(--text-label);
             background: transparent;
         }
 
@@ -1224,12 +1229,12 @@
 
         .dog-calculator-food-result-label {
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-food-result-value {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             padding: 2px 8px;
             background: rgba(241, 154, 95, 0.15);
             border-radius: 3px;
@@ -1238,35 +1243,35 @@
 
         /* Dark theme support for food sources */
         .dog-calculator-container.theme-dark .dog-calculator-food-source-card {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-source-title {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-slider {
-            background: #433c4f;
+            background: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-input {
-            background: #433c4f;
+            background: var(--border-color);
             border-color: #524a5f;
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-group {
-            border-color: #433c4f;
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-add-food-btn {
-            border-color: #433c4f;
-            color: #b8b0c2;
+            border-color: var(--border-color);
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-add-food-btn:hover {
@@ -1281,46 +1286,46 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-result-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-result-value {
-            color: #f5f3f7;
+            color: var(--text-primary);
             background: rgba(241, 154, 95, 0.2);
         }
 
         /* System theme support for food sources */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-food-source-card {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-source-title {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-slider {
-                background: #433c4f;
+                background: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-input {
-                background: #433c4f;
+                background: var(--border-color);
                 border-color: #524a5f;
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-group {
-                border-color: #433c4f;
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-add-food-btn {
-                border-color: #433c4f;
-                color: #b8b0c2;
+                border-color: var(--border-color);
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-add-food-btn:hover {
@@ -1335,11 +1340,11 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-result-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-result-value {
-                color: #f5f3f7;
+                color: var(--text-primary);
                 background: rgba(241, 154, 95, 0.2);
             }
         }
@@ -1415,7 +1420,7 @@
         }
 
         .dog-calculator-lock-icon.unlocked {
-            color: #635870;
+            color: var(--text-label);
         }
 
         .dog-calculator-lock-icon.disabled {
@@ -1430,7 +1435,7 @@
 
         /* Dark theme support for lock icons */
         .dog-calculator-container.theme-dark .dog-calculator-lock-icon.unlocked {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-lock-icon.locked {
@@ -1440,7 +1445,7 @@
         /* System theme support for lock icons */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-lock-icon.unlocked {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-lock-icon.locked {