/* Gravity UI token bridge — remaps neutral --mb-* tokens to Gravity equivalents so any --g-color-* adjustment propagates through existing components. Brand tokens (navy/gold) are intentionally left alone. Must target body.g-root because --g-color-* variables are scoped on .g-root_theme_light, not :root. Loaded by base.html AND by every standalone page (login, signup, terms, 500.html, etc.). Pair with: gravity-tokens.css, gravity-icons.css, and class="g-root g-root_theme_light" on . */ body.g-root { /* Lines / muted text */ --mb-border: var(--g-color-line-generic-solid); --mb-border-strong: var(--g-color-line-generic-hover); --mb-divider: var(--g-color-line-generic); --mb-muted: var(--g-color-text-hint); --mb-muted-light: var(--g-color-text-hint); /* Semantic colors */ --mb-profit: var(--g-color-text-positive); --mb-profit-soft: var(--g-color-base-positive-light); --mb-loss: var(--g-color-text-danger); --mb-loss-soft: var(--g-color-base-danger-light); /* Radius — Gravity is slightly smaller; --mb-r-xl stays project-specific */ --mb-r-sm: var(--g-border-radius-m); /* 6px */ --mb-r-md: var(--g-border-radius-l); /* 8px */ --mb-r-lg: var(--g-border-radius-xl); /* 10px */ /* Shadows — reuse Gravity shadow color tokens instead of hardcoded navy rgba */ --mb-shadow-1: 0 1px 2px var(--g-color-sfx-shadow-light); --mb-shadow-2: 0 4px 12px var(--g-color-sfx-shadow-light); --mb-shadow-3: 0 8px 24px var(--g-color-sfx-shadow); --mb-shadow-4: 0 12px 32px var(--g-color-sfx-shadow); --mb-shadow-5: 0 20px 60px var(--g-color-sfx-shadow-heavy); /* Spacing — 1:1 match with Gravity 4px base grid. */ --mb-s-1: var(--g-spacing-1); /* 4px */ --mb-s-2: var(--g-spacing-2); /* 8px */ --mb-s-3: var(--g-spacing-3); /* 12px */ --mb-s-4: var(--g-spacing-4); /* 16px */ --mb-s-5: var(--g-spacing-5); /* 20px */ --mb-s-6: var(--g-spacing-6); /* 24px */ --mb-s-8: var(--g-spacing-8); /* 32px */ /* Focus ring */ --mb-focus-ring: 0 0 0 3px var(--g-color-line-focus); /* Neutral surfaces — ready for future component hover/active states. */ --mb-surface-hover: var(--g-color-base-generic-hover); --mb-surface-subtle: var(--g-color-base-generic); }