@metropolle/design-system 1.2025.0-9.6.255 → 1.2025.1-0.1.1548

package/dist/css/compat/back.css

@@ -100,11 +100,15 @@ button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn
   transform: translateY(-1px) !important;
 }
 
-/* Modal close button must stay static */
+/* Modal close button: keep static (no lift) but preserve vertical centering */
 .mds-modal-header > button[aria-label="Fechar"],
 .mds-modal-header > button[aria-label="Fechar"]:hover,
-.mds-modal-header > button[aria-label="Fechar"]:focus {
-  transform: none !important;
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
   transition: none !important;
   box-shadow: none !important;
   background-color: transparent !important;
@@ -193,19 +197,20 @@ html[data-theme="light"] button:hover {
 /* ========================================
    Selects and period filter (theme-responsive)
    ======================================== */
-select,
+select:not(.mds-select-themed):not(.mds-period-filter__select),
 .mds-period-filter__select {
-  background-color: rgba(255, 255, 255, 0.1) !important;
+  /* Match DS ghost button default state */
+  background-color: transparent !important;
   color: #ffffff !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border: none !important;
   border-radius: 8px !important;
   padding: 0.5rem 1rem !important;
   font-family: inherit !important;
   font-size: 0.875rem !important;
   cursor: pointer !important;
-  transition: all 0.2s ease !important;
-  backdrop-filter: blur(10px) !important;
-  -webkit-backdrop-filter: blur(10px) !important;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
   -webkit-appearance: none !important;
      -moz-appearance: none !important;
           appearance: none !important;
@@ -216,53 +221,52 @@ select,
   padding-right: 2.5rem !important;
 }
 
-select:hover,
+select:not(.mds-select-themed):not(.mds-period-filter__select):hover,
 .mds-period-filter__select:hover {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-  border-color: rgba(255, 255, 255, 0.3) !important;
+  /* Same hover treatment as DS ghost */
+  background-color: var(--mds-color-background-secondary) !important;
 }
 
-select:focus,
+select:not(.mds-select-themed):not(.mds-period-filter__select):focus,
 .mds-period-filter__select:focus {
   outline: none !important;
   border-color: #60a5fa !important;
   box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
 }
 
-select:disabled,
+select:not(.mds-select-themed):not(.mds-period-filter__select):disabled,
 .mds-period-filter__select:disabled {
   opacity: 0.5 !important;
   cursor: not-allowed !important;
 }
 
-select option {
+select:not(.mds-select-themed):not(.mds-period-filter__select) option {
   background-color: rgba(30, 30, 30, 0.95) !important;
   color: #ffffff !important;
   padding: 0.5rem !important;
 }
 
 /* Light theme select styles */
-html[data-theme="light"] select,
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select),
 html[data-theme="light"] .mds-period-filter__select {
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  background-color: transparent !important;
   color: #1a1a1a !important;
-  border-color: rgba(0, 0, 0, 0.1) !important;
+  border: none !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
 }
 
-html[data-theme="light"] select:hover,
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select):hover,
 html[data-theme="light"] .mds-period-filter__select:hover {
-  background-color: rgba(0, 0, 0, 0.08) !important;
-  border-color: rgba(0, 0, 0, 0.15) !important;
+  background-color: rgba(0, 0, 0, 0.05) !important;
 }
 
-html[data-theme="light"] select:focus,
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select):focus,
 html[data-theme="light"] .mds-period-filter__select:focus {
   border-color: #3b82f6 !important;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
 }
 
-html[data-theme="light"] select option {
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select) option {
   background-color: rgba(250, 250, 250, 0.95) !important;
   color: #1a1a1a !important;
 }
@@ -280,6 +284,10 @@ html[data-theme="light"] select option {
   min-width: 150px !important;
 }
 
+.mds-dropdown {
+  position: relative !important;
+}
+
 /* ========================================
    Inputs and selects (mds-*)
    ======================================== */

package/dist/css/components.css

@@ -169,18 +169,39 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
     inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
 }
 
-/* Header button sizing + alignment */
+/* Header close button sizing + alignment */
 .mds-modal-header > button[aria-label="Fechar"] {
+  /* Size and reset */
   font-size: 1rem !important;
   line-height: 1 !important;
-  padding: 4px 8px !important;
   transition: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  /* Colors from DS tokens with robust fallback */
+  color: var(--mds-color-text-secondary, var(--text-secondary, rgba(0,0,0,0.65))) !important;
+  /* Absolute centering like the left icon */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  width: 32px !important;
+  height: 32px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 .mds-modal-header > button[aria-label="Fechar"]:hover,
-.mds-modal-header > button[aria-label="Fechar"]:focus {
-  transform: none !important;
-  transition: none !important;
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  /* Keep centered on interactive states and avoid lifts/shadows */
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
   box-shadow: none !important;
+  transition: none !important;
+  color: var(--mds-color-text-primary, var(--text-primary, #111827)) !important;
 }
 
 /* Responsive modal */
@@ -529,12 +550,28 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   cursor: not-allowed;
 }
 
-/* Dropdown Options Styling */
-.mds-period-filter__select option {
+/* Dropdown Options Styling - High specificity to override compat rules */
+select.mds-period-filter__select option {
   background-color: var(--mds-dashboard-control-option-bg) !important;
   color: var(--mds-dashboard-control-option-color) !important;
-  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
-  -webkit-appearance: none;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  -webkit-appearance: none !important;
+}
+
+select.mds-period-filter__select option:hover,
+select.mds-period-filter__select option:focus,
+select.mds-period-filter__select option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Enhanced contrast for webkit-based browsers */
+select.mds-period-filter__select option:focus,
+select.mds-period-filter__select option:active,
+select.mds-period-filter__select option[selected] {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
 }
 
 /* Additional styling for browsers that support it */
@@ -555,6 +592,178 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   background: var(--mds-dashboard-control-border-disabled);
 }
 
+/* =========================
+   Generic Dropdown/Select Component
+   ========================= */
+
+/* Generic dropdown container */
+.mds-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Generic themed select - inherits dashboard control styling */
+.mds-select-themed {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md) !important;
+  font-weight: var(--mds-typography-fontWeight-medium) !important;
+  font-size: var(--mds-typography-fontSize-sm) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+  border-radius: var(--mds-spacing-borderRadius-md) !important;
+  cursor: pointer !important;
+  outline: none !important;
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  background-repeat: no-repeat !important;
+  background-size: 16px !important;
+  padding-right: 2rem !important;
+  transition: var(--mds-effects-transition-normal) !important;
+
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg) !important;
+  color: var(--mds-dashboard-control-color) !important;
+  border: 1px solid var(--mds-dashboard-control-border) !important;
+  background-image: var(--mds-dashboard-control-dropdown-icon) !important;
+  background-position: right 8px center !important;
+  box-shadow: var(--mds-dashboard-control-shadow) !important;
+}
+
+.mds-select-themed:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover) !important;
+  box-shadow: var(--mds-dashboard-control-shadow-hover) !important;
+}
+
+.mds-select-themed:disabled {
+  opacity: var(--mds-effects-opacity-disabled) !important;
+  cursor: not-allowed !important;
+}
+
+/* Dropdown Options Styling - High specificity to override compat rules */
+select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  -webkit-appearance: none !important;
+}
+
+select.mds-select-themed option:hover,
+select.mds-select-themed option:focus,
+select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Enhanced contrast for webkit-based browsers */
+select.mds-select-themed option:focus,
+select.mds-select-themed option:active,
+select.mds-select-themed option[selected] {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
+}
+
+/* Maximum specificity for geo dropdowns to ensure they always work */
+html .mds-dropdown select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+}
+
+html .mds-dropdown select.mds-select-themed option:hover,
+html .mds-dropdown select.mds-select-themed option:focus,
+html .mds-dropdown select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Absolute specificity to override any browser or other CSS */
+html body .mds-dropdown select.mds-select-themed option,
+html body div .mds-dropdown select.mds-select-themed option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+  font-size: var(--mds-typography-fontSize-sm) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+}
+
+html body .mds-dropdown select.mds-select-themed option:hover,
+html body .mds-dropdown select.mds-select-themed option:focus,
+html body .mds-dropdown select.mds-select-themed option:checked,
+html body div .mds-dropdown select.mds-select-themed option:hover,
+html body div .mds-dropdown select.mds-select-themed option:focus,
+html body div .mds-dropdown select.mds-select-themed option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+  font-weight: 500 !important;
+}
+
+/* Ultimate specificity safeguard for geo dropdowns */
+html body div.mds-dropdown select.mds-select-themed {
+  background-color: var(--mds-dashboard-control-bg) !important;
+  color: var(--mds-dashboard-control-color) !important;
+  border: 1px solid var(--mds-dashboard-control-border) !important;
+  background-image: var(--mds-dashboard-control-dropdown-icon) !important;
+  background-position: right 8px center !important;
+  background-repeat: no-repeat !important;
+  background-size: 16px !important;
+  padding-right: 2rem !important;
+}
+
+/* Additional styling for browsers that support it */
+.mds-select-themed::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mds-select-themed::-webkit-scrollbar-track {
+  background: var(--mds-dashboard-control-option-bg);
+}
+
+.mds-select-themed::-webkit-scrollbar-thumb {
+  background: var(--mds-dashboard-control-border);
+  border-radius: 4px;
+}
+
+.mds-select-themed::-webkit-scrollbar-thumb:hover {
+  background: var(--mds-dashboard-control-border-disabled);
+}
+
+/* Compatibility alias - maps period filter to generic themed select */
+.mds-period-filter__select {
+  /* Copy all styles from .mds-select-themed for full compatibility */
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 2rem;
+  min-width: 140px;
+  transition: var(--mds-effects-transition-normal);
+
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-image: var(--mds-dashboard-control-dropdown-icon);
+  background-position: right 8px center;
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-period-filter__select:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-period-filter__select:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+}
+
 /* Dashboard Refresh Button */
 .mds-dashboard-refresh {
   padding: var(--mds-spacing-sm) var(--mds-spacing-md);
@@ -592,11 +801,11 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
 
 /* Theme Support - Default (Dark Theme) */
 :root {
-  /* Dashboard Control Variables - Dark Theme */
-  --mds-dashboard-control-bg: rgba(255, 255, 255, 0.15);
-  --mds-dashboard-control-bg-hover: rgba(255, 255, 255, 0.25);
+  /* Dashboard Control Variables - Dark Theme (default) */
+  --mds-dashboard-control-bg: rgba(0, 0, 0, 0.35);
+  --mds-dashboard-control-bg-hover: rgba(0, 0, 0, 0.5);
   --mds-dashboard-control-color: #ffffff;
-  --mds-dashboard-control-border: rgba(255, 255, 255, 0.2);
+  --mds-dashboard-control-border: rgba(255, 255, 255, 0.18);
   --mds-dashboard-control-border-disabled: rgba(255, 255, 255, 0.3);
   --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
@@ -605,6 +814,96 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   /* Dropdown Options - Dark Theme */
   --mds-dashboard-control-option-bg: #2a2a2a;
   --mds-dashboard-control-option-color: #ffffff;
+  --mds-dashboard-control-option-bg-hover: #505050;
+  --mds-dashboard-control-option-color-hover: #ffffff;
+  
+  /* Login specific variables - Dark Theme */
+  --mds-login-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.1);
+  --mds-input-focus-border: #aaaaaa;
+  --mds-input-focus-bg: rgba(255, 255, 255, 0.15);
+  --mds-input-focus-shadow: 0 4px 12px rgba(170, 170, 170, 0.2);
+  --mds-error-bg: rgba(200, 200, 200, 0.15);
+  --mds-error-border: rgba(200, 200, 200, 0.3);
+}
+
+/* Theme Toggle (square, themed) */
+.mds-theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mds-theme-toggle-size, 2.5rem);
+  height: var(--mds-theme-toggle-size, 2.5rem);
+  min-width: var(--mds-theme-toggle-size, 2.5rem);
+  padding: 0;
+  border-radius: var(--mds-spacing-borderRadius-md);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  box-shadow: var(--mds-dashboard-control-shadow);
+  cursor: pointer;
+  outline: none;
+  transition: var(--mds-effects-transition-normal);
+}
+
+/* Force dark background in dark theme */
+.mds-theme-toggle[data-theme="dark"] {
+  background-color: rgba(0, 0, 0, 0.35) !important;
+  border: 1px solid rgba(255, 255, 255, 0.18) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+}
+
+.mds-theme-toggle:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+/* Force dark hover in dark theme */
+.mds-theme-toggle[data-theme="dark"]:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.mds-theme-toggle:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: transparent !important;
+  border: 2px solid var(--mds-dashboard-control-border-disabled);
+  box-shadow: none !important;
+}
+
+.mds-theme-toggle--sm { --mds-theme-toggle-size: 2rem; }
+.mds-theme-toggle--md { --mds-theme-toggle-size: 2.5rem; }
+.mds-theme-toggle--lg { --mds-theme-toggle-size: 3rem; }
+
+/* Monochromatic theme toggle icons via CSS pseudo-elements */
+.mds-theme-toggle[data-theme="light"]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000000'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.mds-theme-toggle[data-theme="dark"]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23ffffff'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 /* Light Theme Support */
@@ -621,6 +920,17 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   /* Dropdown Options - Light Theme */
   --mds-dashboard-control-option-bg: #ffffff;
   --mds-dashboard-control-option-color: #1a1a1a;
+  --mds-dashboard-control-option-bg-hover: #f0f7ff;
+  --mds-dashboard-control-option-color-hover: #1a1a1a;
+  
+  /* Login specific variables - Light Theme */
+  --mds-login-bg: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #dcdcdc 100%);
+  --mds-input-bg: rgba(255, 255, 255, 0.8);
+  --mds-input-focus-border: #666666;
+  --mds-input-focus-bg: rgba(255, 255, 255, 1);
+  --mds-input-focus-shadow: 0 4px 12px rgba(102, 102, 102, 0.15);
+  --mds-error-bg: rgba(150, 150, 150, 0.1);
+  --mds-error-border: rgba(150, 150, 150, 0.3);
 }
 
 /* Form Input Styles */

package/dist/css/mermaid.css

@@ -0,0 +1,163 @@
+/* Metropolle Design System – Mermaid Diagram Styling */
+
+/*
+   Provides palette-aware theming for Mermaid diagrams that matches the
+   architecture documentation reference. Consumers should pair these styles
+   with the class definitions exported in documentation snippets (ex: pastelBlue,
+   accentOrange) to ensure consistent fill and typography across projects.
+*/
+
+:root {
+  --mds-mermaid-label-dark: var(--mds-color-neutral-900, #0f172a);
+  --mds-mermaid-label-light: var(--mds-color-neutral-50, #f8fafc);
+  --mds-mermaid-node-font-weight: 600;
+  --mds-mermaid-edge-font-weight: 500;
+}
+
+/* Base container styling – glass morphism aligned with platform visuals */
+html[data-theme='dark'] .mermaid {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-radius: var(--mds-border-radius-lg, 12px);
+  padding: var(--mds-space-4, 1rem);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin: var(--mds-space-4, 1rem) 0;
+}
+
+html[data-theme='light'] .mermaid {
+  background: rgba(255, 255, 255, 0.7) !important;
+  border-radius: var(--mds-border-radius-lg, 12px);
+  padding: var(--mds-space-4, 1rem);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  margin: var(--mds-space-4, 1rem) 0;
+  box-shadow: var(--mds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+}
+
+/* Default typography settings for nodes and clusters */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) {
+  --mds-mermaid-node-color: var(--mds-mermaid-label-dark);
+  --mds-mermaid-node-weight-current: var(--mds-mermaid-node-font-weight);
+}
+
+/* Switch to light foreground when nodes use strong accent fills */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#00bcd4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1565c0" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1976d2" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#2196f3" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#34a853" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#388e3c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3b82f6" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3f48cc" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4285f4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#45b7d1" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4b612c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4caf50" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4ecdc4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#607d8b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#627eea" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#673ab7" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#689f38" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#759c3e" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#795548" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#7b1fa2" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#96ceb4" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#9c27b0" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#c2185b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#dd344c" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#e91e63" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f44336" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f57c00" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f7931a" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff5722" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff6b6b" i]),
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff9800" i]) {
+  --mds-mermaid-node-color: var(--mds-mermaid-label-light);
+}
+
+/* Apply the computed foreground colour to all supported Mermaid label types */
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label text,
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label tspan {
+  fill: var(--mds-mermaid-node-color) !important;
+  font-weight: var(--mds-mermaid-node-weight-current);
+}
+
+html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
+  color: var(--mds-mermaid-node-color) !important;
+  font-weight: var(--mds-mermaid-node-weight-current);
+}
+
+/* Preserve lighter typography for edge labels so they remain legible */
+html[data-theme='dark'] .mermaid .edgeLabel text,
+html[data-theme='dark'] .mermaid .edgeLabel tspan {
+  fill: var(--ifm-font-color-base, #e5e7eb) !important;
+  font-weight: var(--mds-mermaid-edge-font-weight);
+}
+
+/* Light theme keeps default dark text but enforces consistent weight */
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label text,
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label tspan,
+html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
+  font-weight: var(--mds-mermaid-node-font-weight, 600);
+}
+
+/*
+ * Metropolle Official Mermaid Diagram Classes
+ * Based on Arquitetura.md color standards - compatible with light/dark themes
+ */
+
+/* Frontend/UI Components */
+.mds-frontend {
+  fill: #e3f2fd;
+  stroke: #1976d2;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* AWS/Infrastructure Components */
+.mds-aws {
+  fill: #fff3e0;
+  stroke: #f57c00;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* Runtime/Process Components */
+.mds-runtime {
+  fill: #f3e5f5;
+  stroke: #8e24aa;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* Storage/Data Components */
+.mds-storage {
+  fill: #e8f5e8;
+  stroke: #388e3c;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* Security/Authentication Components */
+.mds-security {
+  fill: #ffebee;
+  stroke: #d32f2f;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* Results/Output Components */
+.mds-result {
+  fill: #fce4ec;
+  stroke: #c2185b;
+  stroke-width: 2px;
+  color: #000;
+}
+
+/* Legacy compatibility aliases */
+.pastelBlue { fill: #e3f2fd; stroke: #1976d2; stroke-width: 2px; color: #000; }
+.accentOrange { fill: #fff3e0; stroke: #f57c00; stroke-width: 2px; color: #000; }
+.pastelPurple { fill: #f3e5f5; stroke: #8e24aa; stroke-width: 2px; color: #000; }
+.pastelGreen { fill: #e8f5e8; stroke: #388e3c; stroke-width: 2px; color: #000; }
+.accentRed { fill: #ffebee; stroke: #d32f2f; stroke-width: 2px; color: #000; }
+.pastelPink { fill: #fce4ec; stroke: #c2185b; stroke-width: 2px; color: #000; }