:root {
color-scheme: light;
--mg-primary-base: #2D6A4F;
--mg-primary:      #2D6A4F;
--mg-primary-2:    color-mix(in srgb, var(--mg-primary-base) 80%, black);
--mg-primary-soft: color-mix(in srgb, var(--mg-primary-base) 12%, transparent);
--mg-wheel-1: color-mix(in srgb, var(--mg-primary-base) 32%, white);
--mg-wheel-2: color-mix(in srgb, var(--mg-primary-base) 45%, white);
--mg-wheel-3: color-mix(in srgb, var(--mg-primary-base) 58%, white);
--mg-wheel-4: color-mix(in srgb, var(--mg-primary-base) 72%, white);
--mg-wheel-5: color-mix(in srgb, var(--mg-primary-base) 82%, white);
--mg-wheel-6: color-mix(in srgb, var(--mg-primary-base) 90%, white);
--mg-wheel-7: color-mix(in srgb, var(--mg-primary-base) 96%, white);
--mg-wheel-8: var(--mg-primary-base);
--mg-bg:           #F8F8F8;
--mg-surface:      #FFFFFF;
--mg-surface-2:    #F0F0F0;
--mg-text:         #111111;
--mg-text-soft:    #555555;
--mg-text-muted:   #999999;
--mg-border:       #E2E2E2;
--mg-shadow:       0 1px 8px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
--mg-shadow-lg:    0 8px 32px rgba(0,0,0,.12);
--mg-radius:       10px;
--mg-radius-sm:    8px;
--mg-menu-pad-x:   12px;
--mg-list-edge-gap: 10px;
--mg-map-filter:   none;
}
@media (min-width: 992px) {
:root {
--mg-menu-pad-x: clamp(24px, 6vw, 140px);
--mg-list-edge-gap: 16px;
}
}
[data-theme="dark"] {
color-scheme: dark;
--mg-primary:      color-mix(in srgb, var(--mg-primary-base) 60%, white);
--mg-primary-2:    color-mix(in srgb, var(--mg-primary-base) 80%, black);
--mg-primary-soft: color-mix(in srgb, var(--mg-primary-base) 15%, transparent);
--mg-bg:           #1A1A1D;
--mg-surface:      #242428;
--mg-surface-2:    #2E2E33;
--mg-text:         #EDEDEC;
--mg-text-soft:    #9A9A9A;
--mg-text-muted:   #5A5A5A;
--mg-border:       #333338;
--mg-shadow:       0 1px 8px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
--mg-shadow-lg:    0 8px 32px rgba(0,0,0,.6);
--mg-radius:       10px;
--mg-radius-sm:    8px;
--mg-map-filter:   invert(.92) hue-rotate(180deg) brightness(.95) saturate(.7);
}