@import url("./light.css");
@import url("./dark.css");

/* Fluent Colors for reference */
:root {
  /* Border radius  */
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadiusCircular: 10000px;

  /** Font sizes */
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontSizeHero700: 28px;
  --fontSizeHero800: 32px;
  --fontSizeHero900: 40px;
  --fontSizeHero1000: 68px;

  /** Line height*/
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --lineHeightHero700: 36px;
  --lineHeightHero800: 40px;
  --lineHeightHero900: 52px;
  --lineHeightHero1000: 92px;

  /** Font families */
  --fontFamilyBase:
    "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", sans-serif;
  --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
  --fontFamilyNumeric:
    Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont,
    Roboto, "Helvetica Neue", sans-serif;

  /* Font weight */
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;

  /* Stroke width */
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;
  --strokeWidthThickest: 4px;

  /* Spacing */
  --spacingHorizontalNone: 0;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;
  --spacingVerticalNone: 0;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXS: 4px;
  --spacingVerticalSNudge: 6px;
  --spacingVerticalS: 8px;
  --spacingVerticalMNudge: 10px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXXL: 32px;

  /* Duration */
  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 150ms;
  --durationNormal: 200ms;
  --durationGentle: 250ms;
  --durationSlow: 300ms;
  --durationSlower: 400ms;
  --durationUltraSlow: 500ms;

  /* Curve */
  --curveAccelerateMax: cubic-bezier(0.9, 0.1, 1, 0.2);
  --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
  --curveAccelerateMin: cubic-bezier(0.8, 0, 0.78, 1);
  --curveDecelerateMax: cubic-bezier(0.1, 0.9, 0.2, 1);
  --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
  --curveDecelerateMin: cubic-bezier(0.33, 0, 0.1, 1);
  --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --curveLinear: cubic-bezier(0, 0, 1, 1);
}

html {
  font-family: var(--fontFamilyBase);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@font-face {
  font-family: "Segoe UI";
  src:
    local("Segoe UI Light"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2)
      format("woff2"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff)
      format("woff"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf)
      format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Segoe UI";
  src:
    local("Segoe UI Semilight"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2)
      format("woff2"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff)
      format("woff"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf)
      format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Segoe UI";
  src:
    local("Segoe UI"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2)
      format("woff2"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff)
      format("woff"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf)
      format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Segoe UI";
  src:
    local("Segoe UI Semibold"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2)
      format("woff2"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff)
      format("woff"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf)
      format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Segoe UI";
  src:
    local("Segoe UI Bold"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2)
      format("woff2"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff)
      format("woff"),
    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf)
      format("truetype");
  font-weight: 700;
}
