@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/400.css");
@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/400-italic.css");
@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/500.css");
@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/500-italic.css");
@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/600.css");
@import url("https://content.powerapps.com/resource/powerappsportal/fonts/montserrat/v25/600-italic.css");

:root {
  /* Brand */
  --sbm-color-primary: #175499;
  --sbm-color-primary-strong: #0D3159;
  --sbm-color-secondary: #626366;
  --sbm-color-secondary-muted: #F4F5F9;
  --sbm-color-accent: #F36F21;

  /* Status */
  --sbm-color-success: #73B505;
  --sbm-color-success-muted: #EDF4D7;
  --sbm-color-warning: #FFBF3C;
  --sbm-color-warning-muted: #FFF1DC;
  --sbm-color-danger: #C63939;
  --sbm-color-danger-muted: #F4D7D7;
  --sbm-color-info: #00A1FF;
  --sbm-color-info-muted: #E1F5FE;

  /* Text */
  --sbm-text-default: rgba(0, 0, 0, 0.87);
  --sbm-text-muted: rgba(0, 0, 0, 0.5);
  --sbm-text-brand: var(--sbm-color-primary-strong);
  --sbm-text-inverse: #fff;
  --sbm-text-inverse-muted: rgba(255, 255, 255, 0.5);

  /* Backgrounds */
  --sbm-bg-default: #fff;
  --sbm-bg-strong: var(--sbm-color-primary-strong);
  --sbm-bg-primary: var(--sbm-color-primary);
  --sbm-bg-form: #f5f5f5;
  
  /* Borders */
  --sbm-border-default: var(--sbm-color-secondary);
  --sbm-border-brand: #8698ac;
  --sbm-border-inverse: #fff;
  --sbm-border-form: #0078d4;

  /* Radius */
  --sbm-border-radius-form: 4px;

  /* Fonts */
  --sbm-font-family-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sbm-font-size: 1rem;
  --sbm-line-height: 1.5;
  --sbm-line-height-heading: 1.25;

  /* Font weights */
  --sbm-font-weight-regular: 400;
  --sbm-font-weight-semibold: 500;
  --sbm-font-weight-bold: 600;

  /* shadow */
  --sbm-box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.20);
  --sbm-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

body {
  font-family: var(--sbm-font-family-base);
  font-size: var(--sbm-font-size);
  line-height: var(--sbm-line-height);
  color: var(--sbm-text-default);
  background-color: var(--sbm-bg-default);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

p {
  color: var(--sbm-text-default);
  line-height: var(--sbm-line-height);
  font-family: var(--sbm-font-family-base);
  font-size: var(--sbm-font-size);
  font-weight: var(--sbm-font-weight-regular);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sbm-text-default);
  line-height: var(--sbm-line-height-heading);
  font-family: var(--sbm-font-family-base);
  font-weight: var(--sbm-font-weight-bold);
}

.text-inverse {
  color: var(--sbm-text-inverse);
}

.text-inverse-muted {
  color: var(--sbm-text-inverse-muted);
}

.text-brand {
  color: var(--sbm-text-brand);
}

.text-small {
  color: var(--sbm-text-muted);
  font-size: 0.875em;
}

a, a:hover, a:focus, a:active {
  color: inherit;
}