/* Backblaze Design System — tokens + self-hosted brand fonts.
   Source of truth: the "Backblaze Design System" bundle (colors_and_type.css),
   trimmed to what the migrator UI consumes. Brand rules honored here:
   navy is never pure black; red-on-navy / red-on-white are the brand pairs;
   hover darkens one step, press two; sentence case; no emoji. */

@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/static/design/fonts/SpaceGrotesk-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/static/design/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/static/design/fonts/DMSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/static/design/fonts/DMSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/static/design/fonts/DMSans-SemiBold.ttf') format('truetype'); }

:root {
  /* Core brand */
  --bb-red-70: #87061B; --bb-red-60: #B40A23; --bb-red-50: #E20626; --bb-red-40: #E02945;
  --bb-orange-70: #D24803; --bb-orange-40: #F9733A;
  --bb-purple-70: #3430FF; --bb-purple-60: #4D30FF; --bb-purple-50: #5C44FF;
  --bb-purple-30: #9E92EF; --bb-purple-20: #E6E3FF; --bb-purple-10: #F5F4FF;
  --bb-navy-50: #000033; --bb-navy-45: #33335C; --bb-navy-40: #4C4C6E;
  --bb-navy-30: #5F5F82; --bb-navy-20: #B2B2C1; --bb-navy-10: #E5E5EB;
  --bb-beige-50: #E5E0DD; --bb-beige-30: #EFECEB; --bb-beige-20: #F5F3F1; --bb-beige-10: #FAF9F8;
  --bb-white: #FFFFFF;

  /* Type + shape */
  --bb-font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bb-font-body:    'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bb-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bb-radius-sm: 6px; --bb-radius-md: 10px; --bb-radius-lg: 16px; --bb-radius-pill: 999px;

  /* Signature heatmap gradients — CSS replicas from the design system */
  --bb-gradient-dark: radial-gradient(120% 90% at 15% 95%, #E20626 0%, rgba(226,6,38,0) 38%),
                      radial-gradient(120% 90% at 95% 70%, #3430FF 0%, rgba(52,48,255,0) 42%),
                      radial-gradient(60%  60% at 75% 95%, #ED560D 0%, rgba(237,86,13,0) 40%),
                      linear-gradient(180deg, #000033 0%, #000033 100%);
  --bb-gradient-light: radial-gradient(110% 80% at 90% 30%, #E20626 0%, rgba(226,6,38,0) 45%),
                       radial-gradient(110% 80% at 85% 95%, #F9733A 0%, rgba(249,115,58,0) 50%),
                       radial-gradient(110% 80% at 10% 80%, #E6E3FF 0%, rgba(230,227,255,0) 60%),
                       linear-gradient(180deg, #FAF9F8 0%, #F5F4FF 100%);
}