From 90dc71e1c356c603c91f30eccafabb6fab1423c8 Mon Sep 17 00:00:00 2001
From: patrickzerhusen <patrick.zerhusen@endex-geodaten.de>
Date: Tue, 16 Jun 2026 14:27:53 +0200
Subject: [PATCH] added design tokens for fonds, radiuses, shadows and spacings

---
 public/styles.css | 392 +++++++++++++++++++++++-----------------------
 1 file changed, 200 insertions(+), 192 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 21aa29a..b130757 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -22,7 +22,7 @@
     --color-text-secondary: #5a5a7a;
     --color-border: #e0e0e0;
 
-    /* Standardized Button Colors */
+    /* Button Colors */
     --color-approve: #28a745;
     --color-reject: #DC3545;
     --color-edit: #ffc107;
@@ -40,6 +40,15 @@
     --color-badge-rejected-bg: #f8d7da;
     --color-badge-rejected-text: #721c24;
 
+    /* Typography Scale */
+    --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --font-xs: 0.75rem;     /* Badges, small Labels */
+    --font-sm: 0.85rem;     /* Comments, secondary Text */
+    --font-base: 0.95rem;   /* Buttons, Inputs, primary Text */
+    --font-md: 1.05rem;     /* Card Titles, Sidebar Headings */
+    --font-lg: 1.2rem;      /* Page Headers, Section Titles */
+    --font-xl: 1.4rem;      /* Modal Headings, Hero Text */
+
     /* Spacing Scale */
     --space-xs: 4px;
     --space-sm: 8px;
@@ -47,14 +56,23 @@
     --space-lg: 24px;
     --space-xl: 32px;
 
-    /* Layout (Portal-specific, ignored by other Pages) */
+    /* Border Radius Scale */
+    --radius-sm: 4px;       /* Badges, small Labels */
+    --radius-md: 8px;       /* Cards, Inputs, Buttons */
+    --radius-lg: 12px;      /* Modals, large Panels */
+    --radius-pill: 20px;    /* Pills, Buttons, Tags */
+
+    /* Shadow Scale */
+    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
+    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+    /* Layout */
     --header-height: 56px;
     --footer-height: 40px;
     --map-side-padding: 0px;
 
-    /* Typography */
-    --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
-
     /* Transitions */
     --transition-fast: 150ms ease;
     --transition-normal: 250ms ease;
@@ -76,7 +94,7 @@
 
 body {
     font-family: var(--font-body);
-    font-size: 15px;
+    font-size: var(--font-base);
     color: var(--color-text);
     background: var(--color-bg);
 }
@@ -96,8 +114,8 @@ a { text-decoration: none; }
 .page-header {
     background: var(--color-primary);
     color: white;
-    padding: 14px 24px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 14px var(--space-lg);
+    box-shadow: var(--shadow-md);
 }
 
 .page-header-inner {
@@ -109,20 +127,20 @@ a { text-decoration: none; }
 }
 
 .page-header h1 {
-    font-size: 1.15rem;
+    font-size: var(--font-lg);
     font-weight: 600;
 }
 
 .page-header-nav {
     display: flex;
-    gap: 16px;
+    gap: var(--space-md);
     align-items: center;
 }
 
 .page-header-nav a {
     color: white;
     opacity: 0.8;
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     transition: opacity var(--transition-fast);
 }
 
@@ -134,29 +152,29 @@ a { text-decoration: none; }
    ----------------------------------------------------------------- */
 .page-container {
     max-width: 960px;
-    margin: 24px auto;
-    padding: 0 16px;
+    margin: var(--space-lg) auto;
+    padding: 0 var(--space-md);
 }
 
 .page-content-box {
-    padding: 32px;
+    padding: var(--space-xl);
     background: var(--color-surface);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
     line-height: 1.7;
 }
 
 .page-content-box h2 {
-    font-size: 1.05rem;
+    font-size: var(--font-md);
     font-weight: 600;
-    margin: 24px 0 8px 0;
+    margin: var(--space-lg) 0 var(--space-sm) 0;
     color: var(--color-primary);
 }
 
 .page-content-box h2:first-child { margin-top: 0; }
 
 .page-content-box p {
-    margin-bottom: 12px;
+    margin-bottom: var(--space-sm);
     color: var(--color-text-secondary);
 }
 
@@ -171,11 +189,11 @@ a { text-decoration: none; }
     align-items: center;
     justify-content: center;
     gap: var(--space-xs);
-    padding: 8px 16px;
+    padding: var(--space-sm) var(--space-md);
     border: none;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     font-family: var(--font-body);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     cursor: pointer;
     transition: filter var(--transition-fast), transform var(--transition-fast);
@@ -204,9 +222,9 @@ a { text-decoration: none; }
    ----------------------------------------------------------------- */
 .badge {
     display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.7rem;
+    padding: 2px var(--space-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -216,7 +234,7 @@ a { text-decoration: none; }
 .badge-pending  { background: var(--color-badge-pending-bg);  color: var(--color-badge-pending-text); }
 .badge-approved { background: var(--color-badge-approved-bg); color: var(--color-badge-approved-text); }
 .badge-rejected { background: var(--color-badge-rejected-bg); color: var(--color-badge-rejected-text); }
-.badge-category { background: var(--color-border); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 4px; }
+.badge-category { background: var(--color-border); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: var(--space-xs); }
 
 
 /* -----------------------------------------------------------------
@@ -226,7 +244,7 @@ a { text-decoration: none; }
 
 .form-group label {
     display: block;
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     margin-bottom: var(--space-xs);
     color: var(--color-text);
@@ -236,9 +254,9 @@ a { text-decoration: none; }
     width: 100%;
     padding: 10px 12px;
     border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     font-family: var(--font-body);
-    font-size: 0.9rem;
+    font-size: var(--font-base);
     color: var(--color-text);
     background: var(--color-surface);
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
@@ -274,24 +292,24 @@ select.form-input { cursor: pointer; }
 .dev-warning {
     position: absolute;
     left: var(--space-md);
-    font-size: 0.7rem;
+    font-size: var(--font-xs);
     font-weight: 600;
     color: var(--color-badge-pending-text);
     white-space: nowrap;
     background: rgba(255, 243, 205, 0.8);
-    padding: 4px 10px;
-    border-radius: 8px;
+    padding: var(--space-xs) 10px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--color-badge-pending-text);
 }
 
 .dev-notice {
     background: var(--color-badge-pending-bg);
     color: var(--color-badge-pending-text);
-    padding: 12px 16px;
-    border-radius: 8px;
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
     border: 1px solid #ffc107;
-    font-size: 0.85rem;
-    margin-bottom: 16px;
+    font-size: var(--font-sm);
+    margin-bottom: var(--space-md);
 }
 
 .dev-notice i { margin-right: 6px; }
@@ -304,7 +322,7 @@ select.form-input { cursor: pointer; }
     text-align: center;
     padding: 40px;
     color: #999;
-    font-size: 0.9rem;
+    font-size: var(--font-base);
 }
 
 
@@ -330,7 +348,7 @@ select.form-input { cursor: pointer; }
     padding: 0 var(--space-md);
     background: var(--color-primary);
     color: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
 }
 
 .header-left {
@@ -343,7 +361,7 @@ select.form-input { cursor: pointer; }
 .header-logo { height: 36px; width: auto; object-fit: contain; flex-shrink: 0; }
 
 .header-title {
-    font-size: 1.15rem;
+    font-size: var(--font-lg);
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
@@ -360,9 +378,9 @@ select.form-input { cursor: pointer; }
     border: none;
     background: rgba(255, 255, 255, 0.1);
     color: white;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     transition: background var(--transition-fast);
     text-decoration: none;
 }
@@ -373,7 +391,7 @@ select.form-input { cursor: pointer; }
     margin-left: var(--space-sm);
     background: rgba(255, 255, 255, 0.05);
     opacity: 0.6;
-    font-size: 0.8rem;
+    font-size: var(--font-xs);
 }
 
 .nav-btn-admin:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); }
@@ -409,7 +427,7 @@ select.form-input { cursor: pointer; }
     padding: 0 var(--space-md);
     background: var(--color-surface);
     border-top: 1px solid var(--color-border);
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
     color: var(--color-text-secondary);
 }
 
@@ -430,9 +448,9 @@ select.form-input { cursor: pointer; }
 
 .mouse-position-display {
     background: rgba(255, 255, 255, 0.85);
-    padding: 2px 8px;
-    font-size: 0.75rem;
-    border-radius: 4px;
+    padding: 2px var(--space-sm);
+    font-size: var(--font-xs);
+    border-radius: var(--radius-sm);
 }
 
 /* Layer Control Expanded Dropdown */
@@ -441,28 +459,28 @@ select.form-input { cursor: pointer; }
     background: var(--color-surface) !important;
     font-family: var(--font-body) !important;
     border-radius: 10px !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
+    box-shadow: var(--shadow-lg) !important;
     border: 1px solid var(--color-border) !important;
     min-width: 220px;
 }
 
 .leaflet-control-layers-list {
-    padding: 8px 0;
+    padding: var(--space-sm) 0;
 }
 
 .leaflet-control-layers-separator {
     border-top: 1px solid var(--color-border) !important;
-    margin: 4px 12px !important;
+    margin: var(--space-xs) var(--space-sm) !important;
 }
 
 .leaflet-control-layers label {
     display: flex !important;
     align-items: center !important;
-    gap: 8px !important;
-    padding: 8px 16px !important;
+    gap: var(--space-sm) !important;
+    padding: var(--space-sm) var(--space-md) !important;
     margin: 0 !important;
     cursor: pointer !important;
-    font-size: 0.83rem !important;
+    font-size: var(--font-sm) !important;
     color: var(--color-text) !important;
     transition: background var(--transition-fast);
 }
@@ -485,12 +503,12 @@ select.form-input { cursor: pointer; }
     background: var(--color-primary);
     color: white;
     font-family: var(--font-body);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     font-weight: 600;
-    padding: 10px 16px;
+    padding: 10px var(--space-md);
     display: none;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-sm);
     border-radius: 10px 10px 0 0;
 }
 
@@ -520,13 +538,12 @@ select.form-input { cursor: pointer; }
     background-color: var(--color-primary);
     color: white !important;
     border-color: var(--color-primary);
-
 }
 
 .sidebar-body { padding: var(--space-md); }
 
 .sidebar-body h3 {
-    font-size: 0.95rem;
+    font-size: var(--font-md);
     font-weight: 600;
     margin: var(--space-lg) 0 var(--space-sm) 0;
     color: var(--color-primary);
@@ -538,7 +555,7 @@ select.form-input { cursor: pointer; }
     margin-bottom: var(--space-sm);
     line-height: 1.5;
     color: var(--color-text-secondary);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
 }
 
 
@@ -552,32 +569,32 @@ select.form-input { cursor: pointer; }
     margin-bottom: var(--space-sm);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
 }
 
 .contribution-card:hover {
     border-color: var(--color-primary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-sm);
 }
 
 .contribution-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
 
 .contribution-card-category {
-    font-size: 0.75rem;
+    font-size: var(--font-xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--color-primary);
 }
 
-.contribution-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: var(--space-xs); }
+.contribution-card-title { font-weight: 600; font-size: var(--font-md); margin-bottom: var(--space-xs); }
 
 .contribution-card-meta {
     display: flex;
     justify-content: space-between;
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
     color: var(--color-text-secondary);
 }
 
@@ -588,16 +605,16 @@ select.form-input { cursor: pointer; }
    4.5 Sidebar News Items
    ----------------------------------------------------------------- */
 .news-item {
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
     padding: var(--space-md);
     margin-bottom: var(--space-sm);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
 }
 
-.news-date { font-size: 0.8rem; color: var(--color-text-secondary); }
-.news-item h3 { font-size: 0.95rem; margin: var(--space-xs) 0; color: var(--color-text); }
+.news-date { font-size: var(--font-sm); color: var(--color-text-secondary); }
+.news-item h3 { font-size: var(--font-md); margin: var(--space-xs) 0; color: var(--color-text); }
 
 
 /* -----------------------------------------------------------------
@@ -616,7 +633,7 @@ select.form-input { cursor: pointer; }
 
 .modal-content {
     background: var(--color-surface);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     padding: var(--space-xl);
     max-width: 480px;
     width: 90%;
@@ -628,7 +645,7 @@ select.form-input { cursor: pointer; }
 .modal-small { max-width: 380px; }
 
 .modal-content h2 {
-    font-size: 1.3rem;
+    font-size: var(--font-xl);
     margin-bottom: var(--space-md);
     color: var(--color-primary);
     display: flex;
@@ -651,30 +668,30 @@ select.form-input { cursor: pointer; }
    4.7 Map Popup
    ----------------------------------------------------------------- */
 .popup-detail { min-width: 220px; max-width: 300px; }
-.popup-detail-title { font-weight: 600; font-size: 1rem; margin-bottom: var(--space-xs); }
+.popup-detail-title { font-weight: 600; font-size: var(--font-md); margin-bottom: var(--space-xs); }
 
 .popup-detail-category {
     display: inline-block;
-    font-size: 0.7rem;
+    font-size: var(--font-xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    padding: 2px 8px;
-    border-radius: 4px;
+    padding: 2px var(--space-sm);
+    border-radius: var(--radius-sm);
     background: var(--color-primary-light);
     color: var(--color-primary);
     margin-bottom: var(--space-sm);
 }
 
 .popup-detail-description {
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     line-height: 1.5;
     color: var(--color-text-secondary);
     margin-bottom: var(--space-sm);
 }
 
 .popup-detail-meta {
-    font-size: 0.75rem;
+    font-size: var(--font-xs);
     color: var(--color-text-secondary);
     margin-bottom: var(--space-sm);
     padding-top: var(--space-sm);
@@ -686,13 +703,13 @@ select.form-input { cursor: pointer; }
 .popup-vote-btn {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px 12px;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-sm);
     border: 1px solid var(--color-border);
-    border-radius: 20px;
+    border-radius: var(--radius-pill);
     background: var(--color-surface);
     cursor: pointer;
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     transition: all var(--transition-fast);
 }
 
@@ -701,7 +718,7 @@ select.form-input { cursor: pointer; }
 .popup-vote-btn.disliked { border-color: var(--color-error); background: #ffebee; color: var(--color-error); }
 
 .popup-detail-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
-.popup-detail-actions .btn { flex: 1; padding: 6px 12px; font-size: 0.8rem; min-height: 36px; }
+.popup-detail-actions .btn { flex: 1; padding: 6px var(--space-sm); font-size: var(--font-sm); min-height: 36px; }
 
 
 /* -----------------------------------------------------------------
@@ -712,13 +729,13 @@ select.form-input { cursor: pointer; }
 .popup-photo-btn {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px 12px;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-sm);
     border: 1px solid var(--color-border);
-    border-radius: 16px;
+    border-radius: var(--radius-pill);
     background: var(--color-surface);
     cursor: pointer;
-    font-size: 0.78rem;
+    font-size: var(--font-xs);
     color: var(--color-text-secondary);
     font-family: var(--font-body);
     transition: all var(--transition-fast);
@@ -736,7 +753,7 @@ select.form-input { cursor: pointer; }
     max-width: 100%;
     max-height: 180px;
     object-fit: cover;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     border: 1px solid var(--color-border);
 }
@@ -749,21 +766,21 @@ select.form-input { cursor: pointer; }
 }
 
 .popup-comments-header {
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     color: var(--color-text-secondary);
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px 0;
+    gap: var(--space-xs);
+    padding: var(--space-xs) 0;
     transition: color var(--transition-fast);
 }
 
 .popup-comments-header:hover { color: var(--color-primary); }
 
 .popup-comments-toggle {
-    font-size: 0.65rem;
+    font-size: var(--font-xs);
     margin-left: auto;
     transition: transform 200ms ease;
 }
@@ -775,14 +792,14 @@ select.form-input { cursor: pointer; }
 .popup-comment {
     padding: 6px 0;
     border-bottom: 1px solid #f0f0f0;
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
 }
 
 .popup-comment:last-child { border-bottom: none; }
 
 .popup-comment-meta {
     color: var(--color-text-secondary);
-    font-size: 0.75rem;
+    font-size: var(--font-xs);
     margin-bottom: 2px;
 }
 
@@ -791,18 +808,18 @@ select.form-input { cursor: pointer; }
     line-height: 1.4;
 }
 
-.popup-comment-delete { color: var(--color-error); font-size: 0.7rem; }
+.popup-comment-delete { color: var(--color-error); font-size: var(--font-xs); }
 
 .popup-comment-empty {
-    font-size: 0.8rem;
+    font-size: var(--font-sm);
     color: #bbb;
     font-style: italic;
-    padding: 8px 0;
+    padding: var(--space-sm) 0;
 }
 
 .popup-comment-form {
     display: flex;
-    gap: 4px;
+    gap: var(--space-xs);
     margin-top: var(--space-sm);
 }
 
@@ -810,8 +827,8 @@ select.form-input { cursor: pointer; }
     flex: 1;
     padding: 6px 10px;
     border: 1px solid var(--color-border);
-    border-radius: 16px;
-    font-size: 0.8rem;
+    border-radius: var(--radius-pill);
+    font-size: var(--font-sm);
     font-family: var(--font-body);
     outline: none;
 }
@@ -829,7 +846,7 @@ select.form-input { cursor: pointer; }
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.75rem;
+    font-size: var(--font-xs);
     flex-shrink: 0;
     transition: filter var(--transition-fast);
 }
@@ -844,15 +861,15 @@ select.form-input { cursor: pointer; }
 /* Step Container */
 .shepherd-element {
     max-width: 340px;
-    border-radius: 12px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
+    border-radius: var(--radius-lg) !important;
+    box-shadow: var(--shadow-xl) !important;
     font-family: var(--font-body) !important;
     z-index: 2100 !important;
     overflow: hidden;
 }
 
 .shepherd-element .shepherd-content {
-    border-radius: 12px !important;
+    border-radius: var(--radius-lg) !important;
     padding: 0;
     overflow: hidden;
 }
@@ -866,7 +883,7 @@ select.form-input { cursor: pointer; }
 
 .shepherd-element .shepherd-title {
     color: white !important;
-    font-size: 1rem !important;
+    font-size: var(--font-md) !important;
     font-weight: 600 !important;
     font-family: var(--font-body) !important;
     display: flex !important;
@@ -884,26 +901,26 @@ select.form-input { cursor: pointer; }
 
 /* Body Text */
 .shepherd-element .shepherd-text {
-    padding: 16px 20px !important;
-    font-size: 0.88rem !important;
+    padding: var(--space-md) 20px !important;
+    font-size: var(--font-base) !important;
     line-height: 1.6 !important;
     color: var(--color-text) !important;
 }
 
 /* Footer Buttons */
 .shepherd-element .shepherd-footer {
-    padding: 0 20px 16px 20px !important;
+    padding: 0 20px var(--space-md) 20px !important;
     border-top: none !important;
     display: flex !important;
     justify-content: flex-end !important;
-    gap: 8px !important;
+    gap: var(--space-sm) !important;
 }
 
 .shepherd-element .shepherd-button {
     border: none !important;
-    border-radius: 6px !important;
-    padding: 8px 16px !important;
-    font-size: 0.85rem !important;
+    border-radius: var(--radius-md) !important;
+    padding: var(--space-sm) var(--space-md) !important;
+    font-size: var(--font-sm) !important;
     font-weight: 600 !important;
     font-family: var(--font-body) !important;
     cursor: pointer !important;
@@ -965,7 +982,7 @@ select.form-input { cursor: pointer; }
     height: 100%;
     width: 0%;
     background: rgba(0, 0, 0, 0.12);
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     animation: skip-fill 5s linear forwards;
     pointer-events: none;
 }
@@ -984,7 +1001,7 @@ select.form-input { cursor: pointer; }
     z-index: 1500;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-xs);
     pointer-events: none;
     animation: hint-fade-in 400ms ease;
     transition: opacity 300ms ease;
@@ -998,12 +1015,12 @@ select.form-input { cursor: pointer; }
     background: var(--color-primary);
     color: white;
     font-family: var(--font-body);
-    font-size: 0.78rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     padding: 6px 14px;
-    border-radius: 20px;
+    border-radius: var(--radius-pill);
     white-space: nowrap;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     gap: 6px;
@@ -1041,7 +1058,7 @@ select.form-input { cursor: pointer; }
 /* Mobile */
 @media (max-width: 768px) {
     .shepherd-element { max-width: 300px !important; }
-    .shepherd-element .shepherd-text { font-size: 0.82rem !important; }
+    .shepherd-element .shepherd-text { font-size: var(--font-sm) !important; }
 }
 
 
@@ -1056,20 +1073,20 @@ select.form-input { cursor: pointer; }
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 12px;
+    gap: var(--space-sm);
     margin-bottom: 28px;
 }
 
 .stat-card {
     background: var(--color-surface);
-    border-radius: 8px;
-    padding: 16px;
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
     text-align: center;
     border: 1px solid var(--color-border);
 }
 
 .stat-card .stat-number { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
-.stat-card .stat-label { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 4px; }
+.stat-card .stat-label { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: var(--space-xs); }
 
 
 /* -----------------------------------------------------------------
@@ -1077,24 +1094,24 @@ select.form-input { cursor: pointer; }
    ----------------------------------------------------------------- */
 .page-tabs {
     display: flex;
-    gap: 4px;
-    margin-bottom: 24px;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-lg);
     background: var(--color-surface);
-    padding: 4px;
-    border-radius: 8px;
+    padding: var(--space-xs);
+    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
 }
 
 .page-tab {
-    padding: 8px 16px;
+    padding: var(--space-sm) var(--space-md);
     border: none;
     background: none;
     font-family: var(--font-body);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     color: var(--color-text-secondary);
     cursor: pointer;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     transition: all var(--transition-fast);
     display: flex;
     align-items: center;
@@ -1110,17 +1127,17 @@ select.form-input { cursor: pointer; }
    ----------------------------------------------------------------- */
 .filter-tabs {
     display: flex;
-    gap: 4px;
+    gap: var(--space-xs);
     margin-bottom: 20px;
     border-bottom: 2px solid var(--color-border);
 }
 
 .filter-tab {
-    padding: 8px 16px;
+    padding: var(--space-sm) var(--space-md);
     border: none;
     background: none;
     font-family: var(--font-body);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     font-weight: 600;
     color: var(--color-text-secondary);
     cursor: pointer;
@@ -1135,10 +1152,10 @@ select.form-input { cursor: pointer; }
 .filter-tab .tab-count {
     background: var(--color-border);
     color: var(--color-text-secondary);
-    font-size: 0.7rem;
+    font-size: var(--font-xs);
     padding: 1px 6px;
     border-radius: 10px;
-    margin-left: 4px;
+    margin-left: var(--space-xs);
 }
 
 .filter-tab.active .tab-count { background: var(--color-primary); color: white; }
@@ -1151,17 +1168,17 @@ select.form-input { cursor: pointer; }
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
-    font-size: 0.85rem;
+    margin-bottom: var(--space-md);
+    font-size: var(--font-sm);
     color: var(--color-text-secondary);
 }
 
 .sort-controls select {
-    padding: 4px 8px;
+    padding: var(--space-xs) var(--space-sm);
     border: 1px solid var(--color-border);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     font-family: var(--font-body);
-    font-size: 0.85rem;
+    font-size: var(--font-sm);
     cursor: pointer;
 }
 
@@ -1172,7 +1189,7 @@ select.form-input { cursor: pointer; }
 .contribution-row {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     margin-bottom: 10px;
     overflow: hidden;
     transition: border-color var(--transition-fast);
@@ -1181,7 +1198,7 @@ select.form-input { cursor: pointer; }
 .contribution-row:hover { border-color: #bbb; }
 
 .contribution-row-header {
-    padding: 12px 16px;
+    padding: var(--space-sm) var(--space-md);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1201,7 +1218,7 @@ select.form-input { cursor: pointer; }
 
 .contribution-row-summary .title {
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: var(--font-md);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1209,7 +1226,7 @@ select.form-input { cursor: pointer; }
 
 .collapse-icon {
     color: #999;
-    font-size: 0.75rem;
+    font-size: var(--font-xs);
     flex-shrink: 0;
     transition: transform 200ms ease;
 }
@@ -1217,36 +1234,36 @@ select.form-input { cursor: pointer; }
 .contribution-row.open .collapse-icon { transform: rotate(180deg); }
 
 .contribution-row-detail {
-    padding: 0 16px 16px 16px;
+    padding: 0 var(--space-md) var(--space-md) var(--space-md);
     border-top: 1px solid #f0f0f0;
     display: none;
 }
 
 .contribution-row.open .contribution-row-detail { display: block; }
 
-.detail-layout { display: flex; gap: 16px; margin-top: 12px; margin-bottom: 12px; }
+.detail-layout { display: flex; gap: var(--space-md); margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
 
 .detail-map {
     width: 220px;
     height: 170px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
     flex-shrink: 0;
     background: #f0f0f0;
 }
 
 .detail-content { flex: 1; min-width: 0; }
-.detail-content .description { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 10px; }
+.detail-content .description { font-size: var(--font-sm); line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 10px; }
 .detail-content .description.empty { color: #bbb; font-style: italic; }
 
-.detail-meta { font-size: 0.8rem; color: #999; display: flex; flex-direction: column; gap: 4px; }
+.detail-meta { font-size: var(--font-sm); color: #999; display: flex; flex-direction: column; gap: var(--space-xs); }
 .detail-meta span { display: flex; align-items: center; gap: 6px; }
 
 .action-buttons {
     display: flex;
-    gap: 8px;
+    gap: var(--space-sm);
     flex-wrap: wrap;
-    padding-top: 12px;
+    padding-top: var(--space-sm);
     border-top: 1px solid #f0f0f0;
 }
 
@@ -1255,8 +1272,8 @@ select.form-input { cursor: pointer; }
    5.6 Placeholder Tabs
    ----------------------------------------------------------------- */
 .placeholder-content { text-align: center; padding: 60px 20px; color: #bbb; }
-.placeholder-content i { font-size: 2.5rem; margin-bottom: 12px; display: block; }
-.placeholder-content p { font-size: 0.9rem; }
+.placeholder-content i { font-size: 2.5rem; margin-bottom: var(--space-sm); display: block; }
+.placeholder-content p { font-size: var(--font-base); }
 
 
 /* -----------------------------------------------------------------
@@ -1266,31 +1283,31 @@ select.form-input { cursor: pointer; }
 
 .login-box {
     background: var(--color-surface);
-    border-radius: 12px;
-    padding: 32px;
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
     max-width: 380px;
     width: 90%;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-lg);
     text-align: center;
 }
 
-.login-box h1 { font-size: 1.3rem; margin-bottom: 8px; }
-.login-box p { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 20px; }
+.login-box h1 { font-size: var(--font-xl); margin-bottom: var(--space-sm); }
+.login-box p { font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: 20px; }
 
 .login-box input[type="password"] {
     width: 100%;
     padding: 10px 12px;
     border: 1px solid var(--color-border);
-    border-radius: 6px;
-    font-size: 0.9rem;
-    margin-bottom: 12px;
+    border-radius: var(--radius-md);
+    font-size: var(--font-base);
+    margin-bottom: var(--space-sm);
     font-family: var(--font-body);
 }
 
 .login-box input:focus {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(0, 55, 109, 0.1);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
 .login-box button {
@@ -1299,8 +1316,8 @@ select.form-input { cursor: pointer; }
     background: var(--color-primary);
     color: white;
     border: none;
-    border-radius: 6px;
-    font-size: 0.9rem;
+    border-radius: var(--radius-md);
+    font-size: var(--font-base);
     font-weight: 600;
     cursor: pointer;
     font-family: var(--font-body);
@@ -1308,8 +1325,8 @@ select.form-input { cursor: pointer; }
 
 .login-box button:hover { filter: brightness(1.15); }
 
-.login-error { color: var(--color-error); font-size: 0.85rem; margin-bottom: 12px; }
-.back-link { margin-top: 16px; font-size: 0.8rem; }
+.login-error { color: var(--color-error); font-size: var(--font-sm); margin-bottom: var(--space-sm); }
+.back-link { margin-top: var(--space-md); font-size: var(--font-sm); }
 .back-link a { color: var(--color-text-secondary); }
 
 
@@ -1321,7 +1338,7 @@ select.form-input { cursor: pointer; }
     height: 170px;
     flex-shrink: 0;
     position: relative;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     overflow: hidden;
     border: 1px solid var(--color-border);
     background: #f0f0f0;
@@ -1357,14 +1374,14 @@ select.form-input { cursor: pointer; }
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.7rem;
+    font-size: var(--font-xs);
     z-index: 1000;
     transition: background var(--transition-fast);
 }
 
 .slider-arrow:hover { background: rgba(0, 0, 0, 0.7); }
-.slider-arrow-left { left: 4px; }
-.slider-arrow-right { right: 4px; }
+.slider-arrow-left { left: var(--space-xs); }
+.slider-arrow-right { right: var(--space-xs); }
 
 
 /* =================================================================
@@ -1378,7 +1395,7 @@ select.form-input { cursor: pointer; }
     }
 
     /* Portal */
-    .header-title { font-size: 0.9rem; }
+    .header-title { font-size: var(--font-sm); }
     .header-nav {
         display: none;
         position: absolute;
@@ -1387,18 +1404,18 @@ select.form-input { cursor: pointer; }
         background: var(--color-primary);
         flex-direction: column;
         padding: var(--space-sm);
-        border-radius: 0 0 0 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        border-radius: 0 0 0 var(--radius-md);
+        box-shadow: var(--shadow-lg);
     }
     .header-nav.open { display: flex; }
     .header-menu-toggle { display: block; }
-    .modal-content { padding: var(--space-lg); border-radius: 8px; }
-    .dev-warning { font-size: 0.6rem; left: var(--space-sm); }
+    .modal-content { padding: var(--space-lg); border-radius: var(--radius-md); }
+    .dev-warning { font-size: var(--font-xs); left: var(--space-sm); }
     .mouse-position-display { display: none; }
 
     /* Admin */
-    .page-header { padding: 12px 16px; }
-    .page-header h1 { font-size: 1rem; }
+    .page-header { padding: var(--space-sm) var(--space-md); }
+    .page-header h1 { font-size: var(--font-md); }
     .detail-layout { flex-direction: column; }
     .detail-map { width: 100%; height: 180px; }
     .contribution-row-summary .title { max-width: 200px; }
@@ -1408,32 +1425,28 @@ select.form-input { cursor: pointer; }
     .page-tabs { overflow-x: auto; }
     .detail-slider { width: 100%; height: 200px; }
 
-
     /* Legal */
     .page-content-box { padding: 20px; }
-    .page-container { padding: 0 8px; }
+    .page-container { padding: 0 var(--space-sm); }
 
-
-/* ---------------------------------------------------------
+    /* ---------------------------------------------------------
        6.1 Prevents iOS Auto-Zoom on Inputs
-   --------------------------------------------------------- */
+       --------------------------------------------------------- */
     input, textarea, select {
         font-size: 16px !important;
     }
 
-
-/* ---------------------------------------------------------
+    /* ---------------------------------------------------------
        6.2 Popup Content Height Limit on Mobile
-    --------------------------------------------------------- */
+       --------------------------------------------------------- */
     .leaflet-popup-content {
         max-height: 50vh;
         max-width: 33vh;
         overflow-y: auto;
     }
 
-
-/* ---------------------------------------------------------
-       6.3 Removes Admin Button Offset in Hambueger Menu
+    /* ---------------------------------------------------------
+       6.3 Removes Admin Button Offset in Hamburger Menu
        --------------------------------------------------------- */
     .nav-btn-admin {
         margin-left: 0;
@@ -1444,7 +1457,7 @@ select.form-input { cursor: pointer; }
         justify-content: flex-start;
     }
 
-/* ---------------------------------------------------------
+    /* ---------------------------------------------------------
        6.4 Larger Popup Close Button for Touch
        --------------------------------------------------------- */
     .leaflet-popup-close-button {
@@ -1455,17 +1468,12 @@ select.form-input { cursor: pointer; }
         align-items: center;
         justify-content: center;
         padding: 0 !important;
-        right: 4px !important;
-        top: 4px !important;
+        right: var(--space-xs) !important;
+        top: var(--space-xs) !important;
     }
-
 }
 
 
-
-
-
 @media (min-width: 769px) {
     :root { --map-side-padding: 8px; }
-}
-    
\ No newline at end of file
+}
\ No newline at end of file